Question

我是AngularJS的新手，对使用ngModel有一些不明确之处。我想让用户可以生成无限数量的“名称”：“价值”对。所以我使用ng-repeat为每个元素生成div。这是我的HTML：

<div ng-app>

    <div ng-controller="TestCtrl">
         <input type="button" value="+" ng-click="addNewRow();"/>
        <div ng-repeat="a in range(itemsNumber)"><input type="text" name="key"/> : <input type="text" name="value"/></div>
    </div>
</div>

JavaScript：

function TestCtrl($scope) {
    $scope.itemsNumber = 1;
    $scope.range = function() {
        return new Array($scope.itemsNumber);
    };

    $scope.addNewRow = function () {
        $scope.itemsNumber++;
    }
};

这是工作js小提琴： http://jsfiddle.net/zono/RCW2k/ 我希望有这个生成项目的模型，但不知道如何做到这一点。

我很感激任何想法和提示。

祝你好运。

编辑：

我已经创建了其他解决方案。它可以在这个小提琴中看到 http://jsfiddle.net/zono/RCW2k/8/ 但这个解决方案是个好主意吗？

Answer 1

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

您应该只在示波器上创建一个数组，它也是您的模型：

<强>控制器：

function TestCtrl($scope) {    
    $scope.items = [{key:"hello",value:"world"}]

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

<强> HTML：

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

关于正确使用ngModel的建议

1 个答案:

您应该只在示波器上创建一个数组，它也是您的模型：