2017-04-12 12 views
0

2つのテーブルがあります: "利用可能な件名"と "追加された件名"は、オブジェクトの2つのリストで(ng-repeat)を埋めました。私は彼らからの3つのことを行う必要があります。AngularJS - 2つの配列を比較して同じケースで無効にする

1 - ユーザーのプレスプラス記号は、同じ内容を持つ行が

2「を追加しました件名」に表示されるとき - ユーザーのプレス削除記号、行が消えます

3 - 私がこれまでに第一及び第二のタスクを行ってきた

「を追加しました件名」内の同じ行がある場合は、任意のプラス記号ボタンは無効になりますが、私は最後の1 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を使ってサンプルを作成し、埋め込みスニペットでこれを一度削除するのを忘れた;) –

関連する問題