什麼是正確的方式來改變角js文本？

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

jQuery的這個代碼是適合我：什麼是正確的方式來改變角js文本？

$(".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？

來源

2015-01-21 Kevin7

我會說，請開始egghead.io視頻 – harishr 2015-01-21 07:10:31

您必須閱讀（HTTP [「在AngularJS思考」如果我有一個jQuery的背景是什麼？]：//計算器.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background） – Satpal 2015-01-21 07:11:15

好的。謝謝。我會讀它。 – Kevin7 2015-01-21 07:29:19

你其實並不需要一點點的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>

來源

2015-01-21 07:31:36

它的工作原理！謝謝） – Kevin7 2015-01-21 07:37:58

你可以隨時保持你的視圖邏輯和控制器的視圖和控制器邏輯。所以這不需要任何角度或JavaScript代碼。 – 2015-01-21 07:39:29

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>

來源

2015-01-21 07:15:07 Manwal

謝謝你的幫助 – Kevin7 2015-01-21 07:25:55

@ Kevin7很高興幫助。你也可以接受它。 – Manwal 2015-01-21 07:31:13

只需創建範圍內的兩個局部變量，根據當前值變化的值點擊按鈕。，如： -

<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

來源

2015-01-21 07:15:28 squiroid

謝謝你的幫助）。你的例子與jQuery代碼非常相似。 – Kevin7 2015-01-21 07:28:51

您的歡迎Kevin7 – squiroid 2015-01-21 07:30:12

現場演示：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="[email protected]" 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>

來源

2015-01-21 07:27:25 wbeange

看到

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

來源

2015-01-21 07:29:23 virender

什麼是正確的方式來改變角js文本？

回答

相關問題