Question

<input type="button" class="button" value="click"/><div class="text_block">start</div>

在jquery中，这段代码适合我：

$(".button").click(function() {
if($(this).val() == "click"){
    $(this).val('clicked');
    $(".text_block").html("stop");
}
else if($(this).val() == "clicked"){
    $(this).val('click');
    $(".text_block").html("start");   
}

}）;

我怎样才能使用角度js做到这一点？

Answer 1

AngularJs代码示例

使用角度观察DEMO

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {
    $scope.toggle = true;

    $scope.$watch('toggle', function(){
        $scope.toggleText = $scope.toggle ? 'Click' : 'Cliked';
        $scope.divText = $scope.toggle ? 'Start' : 'Stop';
    })
})

HTML code sample

<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" >{{divText}}</div>

Answer 2

只需在作用域内创建两个局部变量，并根据单击按钮的当前值更改其值。喜欢： -

  <body ng-controller="hello">
    <input type="button" class="button" ng-click="click()" value="{{myvalue}}"/><div class="text_block">{{value}}</div>

    <script>
      var app=angular.module('app',[ ]);
      app.controller("hello",function($scope){
        $scope.value="STOP";//default value
        $scope.myvalue="click";
        $scope.click=function(){
          if($scope.myvalue=="click"){
            $scope.myvalue="clicked";
             $scope.value="START";
          }else{
              $scope.myvalue="click";
             $scope.value="STOP";
          }
        }
      });
    </script>

  </body>

以下是plunker： - http://plnkr.co/edit/QsW1zzQF4BdslMwMFPxU?p=preview

Answer 3

现场演示：http://plnkr.co/edit/zflkeo

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button type="button" ng-click="theAngularWay()">{{btnState}}</button>
    <div class="text_block">{{textBlock}}</div>
  </body>

  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.btnState = 'clicked';
      $scope.textBlock = 'start';

      $scope.theAngularWay = function() {
        if($scope.textBlock === 'start') {
          $scope.btnState = 'clicked';
          $scope.textBlock = 'stop';
        } else {
          $scope.btnState = 'click';
          $scope.textBlock = 'start';
        } 
      }
    });

  </script
</html>

Answer 4

见

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-controller="MyController">


        <input type="button" class="button" value="{{Start}}" ng-click="showMessage()" /> <div class="text_block">{{message}}</div>

    </div>
    <script>
        function MyController($scope) {

            $scope.Start = "click";
            $scope.message = "";

            $scope.showMessage = function () {

                if ($scope.Start == "click") {

                    $scope.Start = "clicked";
                    $scope.message = "stop";
                }
                else {
                    $scope.Start = "click";
                    $scope.message = "start";
                }

            }

        }
    </script>
</body>
</html>

Answer 5

你实际上不需要一些javascript。您可以使用普通的角度HTML代码：

<input type="button" class="button" ng-model="toggle" ng-click="toggle = !toggle" value="{{toggle ? 'clicked' : 'click'}}" />
<div class="text_block">{{toggle ? 'Stop' : 'Start'}}</div>

什么是改变角度js文本的正确方法？

5 个答案: