Question

这是代码（在JSFiddle中实现）

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.field = [];
    $scope.value = [];
    $scope.inputCounter = 0;
}]);

app.directive('addInput', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.find('button').bind('click', function () {
                var input = angular.element('<div><input type="text" ng-model="field[' + scope.inputCounter + ']"><input type="text" ng-model="value[' + scope.inputCounter + ']"> <a href="javascript:;" ng-click="remove_it(' + scope.inputCounter + ')">remove</a></div> ');

                var compile = $compile(input)(scope);
                element.append(input);
                scope.inputCounter++;
                scope.remove_it = function(scope_counter) {
                   compile.remove(this);
                   scope.inputCounter--;
                }
            });
        }
    }
}]);

我需要在用户创建新字段时添加删除按钮。不知何故，我需要删除计数器，以便在用户删除输入时清除数组。我曾尝试使用jQuery，但我认为Angular.JS应该有一种方法

使用我编写的脚本删除了错误的脚本。

谢谢你们。

Answer 1

这是一个快速而又肮脏的例子，说明如何以更“角度”的方式实现这一目标。

您的行存储为具有一对属性的单个对象数组，并且您有两个用于添加和删除行的函数。

$scope.inputs = [];

$scope.addInput = function(){
    $scope.inputs.push({field:'', value:''});
}

$scope.removeInput = function(index){
    $scope.inputs.splice(index,1);
}

在您的视图中，您使用ng-repeat迭代对象数组，当您单击按钮时，数据会自动显示和消失。

<div ng-app="myApp" ng-controller="MyCtrl">
    [<span ng-repeat="input in inputs">"{{input.field}}"</span>]:
    [<span ng-repeat="input in inputs">"{{input.value}}"</span>]
    <div ng-repeat="input in inputs">
        <input type="text" ng-model="input.field" />
        <input type="text" ng-model="input.value" />
        <button ng-click="removeInput($index)">Remove</button>
    </div>
    <button ng-click="addInput()">add input</button>
</div>

这是一个小提琴：http://jsfiddle.net/A6G5r/

如何从AngularJS动态表单中删除元素？

1 个答案: