qtgye
qtgye

Reputation: 3610

Text in a button not changing on ng-click

I have a button whose text is a binding expression.
It has a ng-click directive which is a function to change the value of the expression.
However, it doesn't work.

What's wrong here?

Here is my plunk: http://plnkr.co/edit/EScqj0iczpH65tstokia

HTML

<!DOCTYPE html>
<html ng-app="test">

<head>
     <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
     <link rel="stylesheet" href="style.css" />
     <script src="script.js"></script>
</head>

<body ng-controller="MyCtrl">
    <button ng-click="start()"> {{ myText }} </button>
</body>

JS

angular.module('test',[])
  .controller('MyCtrl',function ($scope) {
    $scope.myText = 'Press to start';
    $scope.start = function () {
      $scope.myText = 'Starting...';
    }
});

Upvotes: 0

Views: 2825

Answers (1)

Huey
Huey

Reputation: 5220

I think you got a little confused. In your script.js, you didn't define a start() function, but you called one in your ng-click directive. Instead, you created a starting() function.

This should work:

angular.module('test',[])
  .controller('MyCtrl',function ($scope) {
    $scope.myText = 'Press to start';
    $scope.start = function () {
      $scope.myText = 'Starting...';
    }
});

Upvotes: 1

Related Questions