ng-if 변수가 $ scope에 있습니다 - 어떻게 수행합니까?

Question

ng-if 및 $ scope에 문제가 있습니다. 나는 모든 사람이 새로운 목록 ($ scope.hired)에 추가되는 사람들의 목록을 가지고있다. 이미 목록에 추가 된 사람들을 위해 "삭제"버튼을 만들어야합니다. ng-if를 사용하여이 작업을 수행하려고했지만 잘못된 작업 일 수 있습니다. 내가 새로운 목록에 사람을 추가하기위한 스크립트를 완료했지만 스크립트 삭제 - $ scope.hired에서 삭제 버튼 및 스크립트 삭제 표시. 너 나 좀 도와 줄 수있어? 각도

:

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

HTML :

<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

가 왜 ng-show 및 ng-hide 사용하지 마십시오.

<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 메서드 (컨트롤러의 속성이기도 함)를 호출합니다. 그런 다음 채용 된 배열에서 인덱스를 가져 와서 배열을 접합하여 간단하게 제거합니다.

또한 documentation에 따라 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>