在 ng-repeat 中添加和删除 JSON 列表
add and delete json list inside ng-repeat
我想创建一个页面,有人在其中向联系人添加 1 个或多个位置,现在我有看起来像这样的东西。
<div class="input-append" ng-repeat="location in newPartner.partner_location">
<input class="input-large" type="text" ng-model="location">
<button class="btn" type="button" ng-click="delLocation1({{$index}})">- {{$index}}</button>
</div>
<div class="input-append">
<input class="input-large" type="text" ng-model="new_location">
<button class="btn btn-primary" type="button" ng-click="addLocation1()">+</button>
</div>
这是 HTML,控制器看起来像这样。
$scope.newPartner = {'partner_name':'newname','partner_location':['X','Y','Z']};
$scope.addLocation1 = function() {
$scope.newPartner.partner_location.push($scope.new_location);
$scope.new_location = "";
}
$scope.delLocation1 = function(id) {
$scope.newPartner.partner_location.splice(id, 1);
}
现在它在开始时工作得很好,但是如果我删除一些项目并添加一些项目,它会突然出错并开始删除上一个项目,而不是我按下的项目 - (减号)。
我做错了什么吗?提前谢谢你,丹尼尔!
首先从ng-click="delLocation1({{$index}})"
中删除{{}}
。它应该是:
ng-click="delLocation1($index).
其次,我建议你添加一些基本的调试器,看看当我们添加新值时,我们的模型会发生什么:<pre>{{newPartner.partner_location|json}}</pre>
第三,我将模型更改为:
$scope.newPartner = {
'partner_name': 'newname',
'partner_location': [{value:'X'}, {value:'Y'}, {value:'Z'}]
};
因为,通过这种方式:['X','Y','Z']
我们无法修改我们的数据。
演示小提琴
最后这是我们的固定代码:
.HTML
<div ng-controller="fessCntrl">
<div ng-repeat="location in newPartner.partner_location">
<input class="input-large" type="text" ng-model="location.value">
<button class="btn" type="button" ng-click="delLocation1(newPartner.partner_location, $index)">{{$index}}</button>
</div>
<div class="input-append">
<input class="input-large" type="text" ng-model="new_location">
<button class="btn btn-primary" type="button" ng-click="addLocation1()">+</button>
</div>
<pre>{{newPartner.partner_location|json}}</pre>
</div>
.JS
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.new_location = "empty";
$scope.newPartner = {
'partner_name': 'newname',
'partner_location': [{value:'X'}, {value:'Y'}, {value:'Z'}]
};
$scope.addLocation1 = function () {
$scope.newPartner.partner_location.push({value:$scope.new_location});
$scope.new_location = "empty";
}
$scope.delLocation1 = function (locations, index) {
locations.splice(index, 1);
}
});
fessmodule.$inject = ['$scope'];
相关文章:
- 删除JSON的一部分
- 文件删除 JSON 响应
- 如何删除 JSON 对象中的对象
- 在 ng-repeat 中添加和删除 JSON 列表
- 删除 JSON 中具有多个值的根节点
- 如何通过 php 中的唯一 ID 删除 Json
- 在向用户呈现数据之前删除 JSON 内容/删除 JavaScript 对象属性
- JavaScript Regexp 用于删除 JSON 中转义的反斜杠和引号
- 使用循环删除JSON中的重复值
- 如何删除JSON数组中的数据
- 如何删除json变量中的父字段,并在javascript或jquery中将其转换为json
- 从屏幕上异步删除JSON对象
- 删除JSON的第一个元素
- 删除json标记标签
- 使用Java Script删除JSON消息中的动态嵌套元素
- 删除JSON中的重复对象并形成一个数组
- 如何使用Jaggery删除json元素
- 删除JSON数组的重复键并获取其JSON路径
- 更新或删除JSON文件
- 使用android删除Json url中的特定数据