AngularJS - Ng点击所有项目的ng repeat

时间:2016-07-19 09:02:21

标签: javascript angularjs ng-repeat angularjs-ng-click

我有以下AngularJS脚本:

  <div ng-app='app' ng-controller="myctrl">
    <ul ng-repeat="module in data.data">
     <li >{{module.name}}<br><span ng-click="module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;">{{module.changer}} </span></li>
   </ul></div>

请同时关注以下Plunker: https://plnkr.co/edit/a7aTK09lDJ3FlCHgdWIf?p=preview

当我现在点击项目'更换器'(打开或关闭)时,它将切换到特定项目的其他值。

但是当我点击其中一个项目时,我希望ng-repeat中的所有项目的值都在变化。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

嗨我理解你的问题,你可以通过定义一个函数来做到这一点,该函数将在json中为变换器字段设置所有值

<div ng-app='app' ng-controller="myctrl">
     <ul ng-repeat="module in data.data">
    <li >{{module.name}}<br><span ng-click="setValue()">
     {{module.changer}} </span></li>
   </ul>     
</div>

在控制器......

$scope.setValue=function(){
 $scope.data.data.forEach(function(it){
   it.changer=(it.changer=='off'? 'on':'off');
   event.PreventDefault;
 }) 
}

答案 1 :(得分:0)

试试这个,http://plnkr.co/edit/BFqR1PMsCKugIcLMGake?p=preview

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

<body>
  <div ng-app='app' ng-controller="myctrl">
    <ul ng-repeat="module in data.data">
      <li >{{module.name}}<br><span ng-click="changeValue()">{{module.changer}} </span></li>
    </ul>
</div>

</body>

</html>

JAVASCRIPT

(function(){       '使用严格';       角           .module('app',[])           .controller('myctrl',myctrl);

  function myctrl($scope, $http) {
      $http.get("data.json")
          .success(function(data) {
              $scope.data = data;
          })
          .error(function(data, status) {
              console.error('Repos error', status, data);
          });
      $scope.changeValue = function() {
          //module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;
          for (var dat in $scope.data.data) {
              $scope.data.data[dat].changer = ($scope.data.data[dat].changer == 'on') ? 'off' : 'on';
          }
      }
  }