ng-repeat循环中的ng-change增量和减量值

时间:2016-11-07 05:22:11

标签: javascript angularjs

我有这样的代码:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome to LearnKode - A code learning platform</title>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    </head>
    <body ng-app="changeExample">
        <div ng-controller="ExampleController">
            <div class="container">
                <div class="col-md-3 well">
                    Are you developer  <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
                   Count: {{count}}
                    <pre>{{isTrue}}</pre>
                </div>
            </div>
        </div>
        <script>
        var app = angular.module("changeExample", []);
        app.controller('ExampleController', ['$scope', function ($scope) {
            $scope.isTrue = true;
        }]);
    </script>
    </body>
    </html>

在此代码中选中复选框时,计数将递增。在这里我如何检查复选框是否勾选,然后只增加,否则如果取消勾选,它将递减。请任何人帮忙。

2 个答案:

答案 0 :(得分:1)

&#13;
&#13;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Welcome to LearnKode - A code learning platform</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>

<body ng-app="changeExample">
  <div ng-controller="ExampleController">
    <div class="container">
      <div class="col-md-3 well">
        Are you developer
        <input type="checkbox" ng-model="isTrue" ng-change="isTrue ? (count=count+1) :(count=count-1) " />Count: {{count}}
        <pre>{{isTrue}}</pre>
      </div>
    </div>
  </div>
  <script>
    var app = angular.module("changeExample", []);
    app.controller('ExampleController', ['$scope',
      function($scope) {
        $scope.isTrue = false;
      }
    ]);
  </script>
</body>

</html>
&#13;
&#13;
&#13;

尝试更改ng-change。

答案 1 :(得分:1)

这对你有用。

&#13;
&#13;
<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome to LearnKode - A code learning platform</title>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    </head>
    <body ng-app="changeExample">
        <div ng-controller="ExampleController">
            <div class="container">
                <div class="col-md-3 well" ng-repeat="Option in OptionList">
                    Are you {{Option.choice}}  <input type="checkbox" ng-model="Option.value" ng-change="UpdateCount(Option)" />
                   Count: {{Option.count}}
                    <pre>{{Option.isTrue}}</pre>
                </div>
            </div>
        </div>
        <script>
        var app = angular.module("changeExample", []);
        app.controller('ExampleController', ['$scope', function ($scope) {
            $scope.isTrue = false;
			$scope.count = 0;
			$scope.OptionList = [{
			 choice: "Developer",
			 value: false,
			 count: 0
			},{
			 choice: "Tester",
			 value: false,
			 count: 0
			},{
			 choice: "Lead",
			 value: false,
			 count: 0
			},{
			 choice: "Architect",
			 value: false,
			 count: 0
			}
		];
		$scope.UpdateCount = function(Option){
		 if(Option.value){
		   Option.count = Option.count + 1;
		 }
		 else {
		  Option.count = Option.count - 1;
		 }
		}
        }]);
    </script>
    </body>
    </html>
&#13;
&#13;
&#13;