在 Angular JS 中更改文本的正确方法是什么

what is right way to change text in angular js?

本文关键字：方法 是什么 文本 Angular JS      更新时间：2023-09-26
<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 正确执行此操作？

AngularJs 代码示例

使用角度手表演示

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>

你实际上不需要一点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>

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

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

这是跳槽：-http://plnkr.co/edit/QsW1zzQF4BdslMwMFPxU?p=preview

现场演示：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>


<!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>
相关文章：