what is right way to change text in angular js?

Question

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

In jquery this code is right for me:

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

});

And how can I do this right using angular js?

You must read [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Satpal, Jan 21 '15 at 07:11

score 1 · Answer 1 · edited Jan 21 '15 at 07:30

AngularJs code sample

Use angular watch 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>

score 0 · Answer 2 · answered Jan 21 '15 at 07:15

Just create two local variable inside the scope and change their value according to the current value of clicked button. Like :-

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

Here is the plunker:- http://plnkr.co/edit/QsW1zzQF4BdslMwMFPxU?p=preview

Thank you for help). Your example is very similar to jquery code. — Kevin7, Jan 21 '15 at 07:28

score 0 · Answer 3 · answered Jan 21 '15 at 07:27

live demo: 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>

score 0 · Answer 4 · answered Jan 21 '15 at 07:29

see

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

score 0 · Accepted Answer · answered Jan 21 '15 at 07:31

0

You actually don't need a bit of javascript. You can do it in plain angular HTML code:

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

answered Jan 21 '15 at 07:31

Shashank Agrawal

25,161
11
89
121

You can always keep your view logic in views and controller logic to controllers. So this does not require any angular or javascript code. – Shashank Agrawal Jan 21 '15 at 07:39

what is right way to change text in angular js?

5 Answers5