我是 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>
最佳答案
您的添加方法称为 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());
};
});
关于javascript - 如何使用 Angular.js 添加/删除 onClick 列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35394019/