2017-04-12 55 views
0

我有兩個表:「可用主題」和「添加主題」,填寫(ng-repeat)兩個對象列表。我需要從他們做三件事情:AngularJS - 比較兩個數組並禁用相同的情況下

1 - 當用戶按加號,具有相同內容的一排「添加主題」

出現2 - 當用戶按下刪除標誌,該行消失

3 - 如果在「添加主題」同一行

我迄今所做的第一和第二任務的任何加號按鈕將被禁用,但我得到了最後一個 enter image description here無解

回答

2

您可以在控制器中添加一個功能來切換added主題狀態。

下面是一個示例代碼段來實現這一

angular.module('app', []); 
 

 
angular.module('app') 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 

 
     $scope.subjects = [{ 
 
       name: "XXX", 
 
       id: "123", 
 
       added: false 
 
      }, 
 
      { 
 
       name: "YYY", 
 
       id: "456", 
 
       added: true 
 
      }, 
 
      { 
 
       name: "ZZZ", 
 
       id: "789", 
 
       added: false 
 
      }, 
 
     ]; 
 

 
     $scope.addRemoveSubject = function(subject) { 
 
      subject.added = !subject.added; 
 
     }; 
 

 
    }]);
<!doctype html> 
 

 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
</head> 
 
    
 
<body ng-controller="ExampleController"> 
 
    <h3>Available subjects</h3> 
 
\t <ul> 
 
    <li ng-repeat="subject in subjects"> 
 
     <strong>{{subject.name}}</strong> {{subject.id}} <button ng-click="addRemoveSubject(subject)" ng-disabled="subject.added">Add</button> 
 
    </li> 
 
    </ul> 
 
    <h3>Added Subjects</h3> 
 
\t <ul> 
 
    <li ng-repeat="subject in subjects | filter:{added:true}"> 
 
     <strong>{{subject.name}}</strong> {{subject.id}} <button ng-click="addRemoveSubject(subject)">Remove</button> 
 
    </li> 
 
    </ul> 
 
</body> 
 
</html>

+0

偉大的答案!只需從代碼段中移除''擺脫js錯誤 –

+0

好點!我用plunker寫了我的示例,並忘記在嵌入式代碼段中刪除它;) –