javascript - 如何使用 Angular.js 添加/删除 onClick 列表项？

Question

我是 Angular.js 的新手，我想做的是每次用户单击 #create-new-rule 时添加一个 lis-item，但下面的内容似乎并不存在工作。

此外，当用户单击 li .delete 时，我希望将该列表项从 DOM 以及 this.rules 数组中删除。

app.js

app.controller('RuleController', function()
{
    function Rule ()
    {
        this.name = 'untitled';

        this.delete  = function ()
        {
            console.log('removed from DOM as well as from this.rules array');
        };
    };

    this.rules = [];

    this.addRule = function () 
    {
       this.rules.push(new Rule());
    };
});

index.html

<div id="rule-controller" ng-controller="RuleController as RuleCtrl">

  <ul id="rules">

    <li class="rule" ng-repeat="rule in RuleCtrl.rules">

         <input type="text" ng-value="rule.name"/>    
         <div class="delete" ng-click="rule.delete()">delete</div>

    </li>

  </ul>

  <div id="create-new-rule">
    <div ng-click="RuleCtrl.add()">create new rule</div>
  </div>

</div>

Answer 1

您的添加方法称为 addRule()，但从 View 中您正在调用 add()。尝试改变这一点。此外，要删除您可以使用 splice，但您需要在 Rule 函数之外获取对 this 的引用才能访问数组。

例如index.html:

<div ng-click="RuleCtrl.addRule()">create new rule</div>

Controller :

var app = angular.module('myApp', []);
app.controller('RuleController', function()
{
    var self = this;
    function Rule ()
    {
        this.name = 'untitled';

        this.delete  = function ()
        {
           var index = self.rules.indexOf(this);
           self.rules.splice(index,1);
        };
    };

    this.rules = [new Rule()];

    this.addRule = function () 
    {
       this.rules.push(new Rule());
    };


});