单击一起处理迭代中的所有项目 - AngularJS



我有一个控制器,在控制器中我正在迭代
ng-click="minusOne($index)"ng-click="plusOne($index)"但是如果我单击第一个块,它会在所有迭代中发生变化,但我想如果我单击第一个块,它应该仅适用于第一个块

      .controller('MainController', ['$scope', '$rootScope', function($scope, $rootScope) {
            $scope.fine = [{
                likes: 0,
                dislikes: 0
            }];
            $scope.plusOne = function(index) {
                $scope.fine[index].likes += 1 * 10;
            };
            $scope.minusOne = function(index) {
                $scope.fine[index].dislikes += 1 * 10;
            };
            $scope.buildBreak = function(index) {
                $scope.fine[index].likes += 1 * 50;
            };
        }])

目录

<div class="item item-body addfineinfo" ng-repeat="putfine in fine">
    <a ng-click="plusOne($index)" class="button button-small button-dark">+ Fine</a>
    <a ng-click="minusOne($index)" class="button button-small button-dark">- Fine</a>
    <a ng-click="buildBreak($index)" class="button button-small button-assertive">BUILD BREAK</a>
 <input  name="message" readonly type="text" value="{{ putfine.likes - putfine.dislikes }}" placeholder="Suhr">

价值应该在这个领域,这也应该在内部

html

        <!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="ctrl">

<div ng-repeat="developerAdd in developer"> 
{{ developerAdd.likes}} - {{developerAdd.dislikes }}
<br/> 
<a ng-click="plusOne($index)" class="button button-small button-dark">+ Fine</a> 
<a ng-click="minusOne($index)" class="button button-small button-dark">- Fine</a> 
<a ng-click="buildBreak($index)" class="button button-small button-assertive">BUILD BREAK</a> 
</div> 
</div>
  </body>
</html>

控制器

// Code goes here
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
  $scope.developer = [{
      id: 1
  },{
      id: 2
  },{
      id: 3
  },{
      id: 4
  }];
  $scope.plusOne = function(index) {
    if ($scope.developer[index].likes == undefined) $scope.developer[index].likes = 0;
      $scope.developer[index].likes += 1 * 10;
  };
  $scope.minusOne = function(index) {
    if ($scope.developer[index].dislikes == undefined) $scope.developer[index].dislikes = 0;
      $scope.developer[index].dislikes += 1 * 10;
  };
  $scope.buildBreak = function(index) {
    if ($scope.developer[index].likes == undefined) $scope.developer[index].likes = 0;
      $scope.developer[index].likes += 1 * 50;
  };
});

最新更新