在angular js中更改文本的正确方法是什么？

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");   
}

}）;

以及如何使用angular 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代码示例

<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>

在angular js中更改文本的正确方法是什么？

问题描述

5 个解决方案

解决方案1
1 2015-01-21 07:15:07

解决方案2
0 2015-01-21 07:15:28

解决方案3
0 2015-01-21 07:27:25

解决方案4
0 2015-01-21 07:29:23

解决方案5
0 已采纳 2015-01-21 07:31:36

在angular js中更改文本的正确方法是什么？

问题描述

5 个解决方案

解决方案1 1 2015-01-21 07:15:07

解决方案2 0 2015-01-21 07:15:28

解决方案3 0 2015-01-21 07:27:25

解决方案4 0 2015-01-21 07:29:23

解决方案5 0 已采纳 2015-01-21 07:31:36

解决方案1
1 2015-01-21 07:15:07

解决方案2
0 2015-01-21 07:15:28

解决方案3
0 2015-01-21 07:27:25

解决方案4
0 2015-01-21 07:29:23

解决方案5
0 已采纳 2015-01-21 07:31:36