ng-if変数が$ scopeに存在します - どうすればいいですか？

Question

ng-ifと$ scopeに問題があります。私はすべての人が新しいリスト（$ scope.hired）に追加される人々のリストを持っています。すでにリストに追加されている人のために「削除」ボタンを作成する必要があります。私はng-ifでこれをやりたかったのですが、おそらく間違っていました。私は新しいリストに人を追加するためのスクリプトを作ったが、私はスクリプトを削除する必要がある - 削除ボタンを表示し、$ scope.hiredからスクリプトを削除する必要がある。手伝って頂けますか？

角度：

$scope.hired.push({ 
    'id': '25', 
    'name': 'John Doe', 
    'value': '100' 
}); 

HTML：あなたはng-showとng-hideを使用していないのはなぜ

<a href="#" class="button add" ng-click="hire(person.id)">Hire</a> 
<a href="#" class="button add hired" ng-if="hired.id==person.id" ng-click="delete(person.id)">Delete</a> 

Answer 1

。

<a href="#" ng-show="hired.id==person.id" class="button add hired" ng-click="delete(person.id)"> 
    Delete 
</a> 

Answer 2

controllerAsの構文を使用することをお勧めします。 ngIfディレクティブを使用するときはいつでも、独自のスコープを作成するので、親コントローラをcontrollerAs構文で参照することで、そのデータに確実にアクセスできます（データがどこから来るかを知ることができます）。

applicantsという名前の配列とhiredという名前の配列を宣言し、それらをコントローラのプロパティに設定します。

申請者に雇用するための雇用方法（コントローラのプロパティ）を呼び出すことによって、申請者を「雇う」ことができます。雇用された応募者の配列に追加するだけです。

申請者を削除する場合は、申請者に削除するためのremoveメソッド（コントローラのプロパティでもあります）を呼び出します。次に、採用された配列からインデックスを取り出し、配列をスプライシングすることによって、それを単に削除します。

に従ってDOM要素の作成を最小限に抑えるために、ngRepeatディレクティブにtrack by applicant.idも使用します。

申請者が雇用されているかどうかは、雇用された配列に含まれているか、そうでないかのいずれかであることがわかります。実証目的のために

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

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

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('MainController', MainController); 
 

 
    MainController.$inject = []; 
 

 
    function MainController() { 
 

 
    var vm = this; 
 

 
    // setup your applicants 
 
    vm.applicants = [{ 
 
     'id': 1, 
 
     'name': 'John Doe', 
 
     'value': 100 
 
     }, 
 
     { 
 
     'id': 2, 
 
     'name': 'Jack Smith', 
 
     'value': 120 
 
     }, 
 
     { 
 
     'id': 3, 
 
     'name': 'Sarah Doe', 
 
     'value': 80 
 
     } 
 
    ]; 
 

 
    // setup your empty hired array 
 
    vm.hired = []; 
 

 
    // expose any functions you need to access from the view here 
 
    vm.hire = hire; 
 
    vm.remove = remove; 
 

 
    /* 
 
    * @name hire 
 
    * @type function 
 
    * 
 
    * @description 
 
    * Hires an applicant by adding the applicant to the hired array 
 
    * 
 
    * @param {applicant} The applicant to hire 
 
    * @return nothing. 
 
    */ 
 
    function hire(applicant) { 
 

 
     // make sure vm.hired is an array 
 
     vm.hired = angular.isArray(vm.hired) ? vm.hired : []; 
 

 
     // push the new item into the array 
 
     vm.hired.push(applicant); 
 

 
    } 
 

 
    /* 
 
    * @name remove 
 
    * @type function 
 
    * 
 
    * @description 
 
    * Removes an applicant from the hired array 
 
    * 
 
    * @param {applicant} The applicant to remove 
 
    * @return nothing. 
 
    */ 
 
    function remove(applicant) { 
 

 
     // get the applicant's index 
 
     var index = vm.hired.indexOf(applicant); 
 

 
     // remove the applicant 
 
     vm.hired.splice(index, 1); 
 

 
    } 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 

 
    <div ng-controller="MainController as MainCtrl"> 
 

 
    <h2>Applicants</h2> 
 

 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>Name</th> 
 
      <th>Value</th> 
 
      <th></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="applicant in MainCtrl.applicants track by applicant.id"> 
 
      <td>{{applicant.id}}</td> 
 
      <td>{{applicant.name}}</td> 
 
      <td>{{applicant.value}}</td> 
 
      <td> 
 
      <a href ng-if="MainCtrl.hired.indexOf(applicant) === -1" ng-click="MainCtrl.hire(applicant)">Hire</a> 
 
      <a href ng-if="MainCtrl.hired.indexOf(applicant) > -1" ng-click="MainCtrl.remove(applicant)">Remove</a> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <h2>Hired</h2> 
 

 
    <pre>{{MainCtrl.hired | json}}</pre> 
 

 
    <div>

、別のオプションは、（あなたがして雇用を必要とするか、またはメソッドは削除されません）申請者オブジェクトにbooleanを切り替えることにより、申請自体を変更することです。ただし、応募者が雇われたときなど、何か他のことをしたいと思っています。申請者の詳細を更新するようにサーバーに要求します。

// app.js 
 
(function() { 
 

 
    'use strict'; 
 

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

 
})(); 
 

 
// main.controller.js 
 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('app').controller('MainController', MainController); 
 

 
    MainController.$inject = []; 
 

 
    function MainController() { 
 

 
    var vm = this; 
 

 
    // setup your applicants 
 
    vm.applicants = [{ 
 
     'id': 1, 
 
     'name': 'John Doe', 
 
     'value': 100 
 
     }, 
 
     { 
 
     'id': 2, 
 
     'name': 'Jack Smith', 
 
     'value': 120 
 
     }, 
 
     { 
 
     'id': 3, 
 
     'name': 'Sarah Doe', 
 
     'value': 80 
 
     } 
 
    ]; 
 

 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 

 
    <div ng-controller="MainController as MainCtrl"> 
 

 
    <h2>Applicants</h2> 
 

 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>Name</th> 
 
      <th>Value</th> 
 
      <th>Hired</th> 
 
      <th></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="applicant in MainCtrl.applicants track by applicant.id"> 
 
      <td>{{applicant.id}}</td> 
 
      <td>{{applicant.name}}</td> 
 
      <td>{{applicant.value}}</td> 
 
      <td>{{applicant.hired ? 'Hired' : 'Not hired'}}</td> 
 
      <td> 
 
      <a href ng-click="applicant.hired = !applicant.hired">Toggle hired</a> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <pre>{{MainCtrl.applicants | json}}</pre> 
 

 
    <div>