Question

我有ng-if和$ scope的问题。我有人员列表，每个人都被添加到新列表（$ scope.hired）。我需要制作＆＃34;删除＆＃34;已添加到列表中的人员按钮。我想用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的数组，并将它们设置为控制器的属性。

然后，我们可以通过调用申请人雇用的雇佣方法（也是控制人的财产）来“雇佣”申请人。然后我们将其添加到雇佣的申请人阵列中。

当我们想要删除申请人时，我们会将申请人的删除方法（也是控制人的财产）称为删除。然后我们通过获取它的索引并拼接租用的数组，将其从雇佣的数组中删除。

我们还在ngRepeat指令中使用track by applicant.id来根据documentation最小化DOM元素的创建。

您可以知道申请人是否被雇用，因为它是在雇用的阵列中，或者不是。

// 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>

$ scope中存在ng-if变量 - 怎么做？

2 个答案: