AngularJS操縱兩個ng-repeat

我在我的HTML5視圖中調用兩次相同的列表。AngularJS操縱兩個ng-repeat

<div class="list" data-ng-repeat="item in model.items"> 
    <div class=list-item"> 
     {{ item.name }} 
     <a data-ng-click="addToList(item)"> 
      <span data-ng-hide="item.checked">Add</span> 
      <span data-ng-show="item.checked">Remove</span> 
     </a> 
    </div> 
</div> 

<div class="checkbox-list" data-ng-repeat="item in model.items"> 
    <div class=list-item"> 
     <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" /> 
     {{ item.name }} 
    </div> 
</div>

在我的控制，我有在範圍定義的方法：

function addToList(item) { 
    item.checked = !item.checked; 

    for (var i = 0; i < this.$scope.items.length; i++) { 
     if (this.$scope.items.id == item.id) { 
      this.$scope.items[i] = item; 
      break; 
     } 
    } 
}

當我點擊Add或Remove按鈕，列表中有一個更新，但是該複選框，列表項沒有得到檢查。

另一方面，當checking a checkbox，列表沒有得到更新。

我該如何做到這一點？

來源

2016-12-29 Kenny

你是什麼意思的'this。$ scope.items'？ – SaiUnique

你可以創建一個運動員嗎？ –

這對我來說很好。 – SaiUnique

你是混合角

javascript函數聲明語法雖然有角的工作，你應該始終角語法來獲得同步的好處模型和視圖之間。 $ scope.addToList =函數（）{}

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    
 
    $scope.model = {}; 
 
    
 
    $scope.model.items = [{"name":"one"},{"name":"two"}] 
 
    
 
    
 
    $scope.addToList = function(item) { 
 
    item.checked = !item.checked; 
 
    } 
 
    
 
    
 
    
 
});

<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.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <div class="list" data-ng-repeat="item in model.items"> 
 
    <div class="list-item"> 
 
     {{ item.name }} 
 
     <a data-ng-click="addToList(item)"> 
 
      <span data-ng-hide="item.checked">Add</span> 
 
      <span data-ng-show="item.checked">Remove</span> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
<div class="checkbox-list" data-ng-repeat="item in model.items"> 
 
    <div class="list-item"> 
 
     <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" /> 
 
     {{ item.name }} 
 
    </div> 
 
</div> 
 

 

 
    
 
    
 
    </body> 
 

 
</html>

來源

2016-12-29 09:03:37 Deep

我試過這個解決方案，但我的代碼沒有任何變化。 – Kenny

你的代碼沒有改變意味着你已經使用了這個語法或者結果沒有改變？ – Deep

解決方案中提供的SO片段正常工作。你能否檢查一下你是否期待這一點？ – Deep

看起來像您使用的是controller as語法。

在你的js代碼

所以加模型到控制器本身（假設你yourController指控制器，你有你的控制器方法）：

for (var i = 0; i < yourController.items.length; i++) { 
    if (yourController.items.id == item.id) { 
     yourController.items[i] = extension; 
     break; 
    } 
    }

內YourController聲明：

var yourController = this;

然後在聲明控制器的HTML中，聲明如下：

ng-controller = "YourController as yourController"

然後你就可以在HTML訪問的項目，如：

yourController.items

來源

2016-12-29 09:03:07

您沒有使用函數$範圍。這可能有所幫助：

$scope.addToList = function (item) { 
    item.checked = !item.checked; 

    for (var i = 0; i < $scope.items.length; i++) { 
     if ($scope.items.id == item.id) { 
      $scope.items[i] = extension; 
      break; 
     } 
    } 
}

來源

2016-12-29 09:15:51 SaiUnique

AngularJS操縱兩個ng-repeat

回答

相關問題