Question

我遇到了麻烦。我有几行 AngularJS视图中动态生成的输入。我正在寻找从这个生成的输入中获取数组的优雅方式。这是我的HTML：

<div ng-app>

    <div ng-controller="TestCtrl">
         <input type="button" value="+" ng-click="addNewRow();"/>
        <div ng-repeat="item in items"><input type="text" name="key" ng-value="{item.name}"/> : <input type="text" ng-value="{item.value}"/>
            <input type="button"  value="x" ng-click="removeItem($index);"/>
        </div>

        <input type="button" value="Test" ng-click="showItems();"/>
    </div>
</div>

这是我的javascript代码：

function TestCtrl($scope) {
    $scope.items = [
        {name: "", value: ""}
    ];

    $scope.addNewRow = function () {
        $scope.items.push({
            name: "",
            value: ""
        });
    };

    $scope.removeItem = function (index) {
        $scope.items.splice(index,1);
    };    

    $scope.showItems = function() {
        alert($scope.items.toSource());
    }
};

警报（$ scope.items.toSource（））;只有在Firefox下才能正常工作看到数组是空的。我正在寻找一种更新阵列或其他角度方式的方法方法。我认为document.querySelector（“input [attr]”）或类似的jQuery并不是个好主意。

这是工作jsFiddle： http://jsfiddle.net/zono/RCW2k/21/

我很感激任何建议和想法。

祝你好运。

Answer 1

使用ngModel：

ngModel指令绑定输入，选择，textarea（或自定义表单）使用NgModelController来控制范围内的属性由该指令创建和公开。

您的观点应如下所示：

<div ng-repeat="item in items">
  <input type="text" ng-model="item.name"/> : 
  <input type="text" ng-model="item.value"/>
  <input type="button"  value="x" ng-click="removeItem($index);"/>
</div>

（关于在代码中使用toSource()，它不是任何标准的一部分 - 仅限Gecko）

工作示例：http://jsfiddle.net/rgF37/

从几个输入中收集值的角度方式

1 个答案: