Question

我有一个简单的表单，它有两个文本框，键入框中的值使用angularJS显示在div中。我还有一个按钮，使用jQuery为表单添加一个新的两行文本框，这也为他们提供了ng-model。

但是，这些新文本框不适用于将值分配给div。有没有办法可以动态地向这个表添加更多行并使它们有效？

HTML：

<table>
    <tr>
        <td><input type="text" ng-model="value1a"></td>
        <td><input type="text" ng-model="value1b"></td>
    </tr>
</table>

<input type="button" value="Add Row" name="addRow">

<div>
    <p>{{value1a}} {{value1b}}</p>
</div>

jquery的：

$(document).ready(function() {
    var count = 2;

    $('[name="addRow"]').click(function() {
        $('.table tr:last').after('<tr></tr>');
        $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'a"></td>');
        $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'b"></td>');

        $('.div').append('<p>{{value' + count + 'a}} {{value' + count +'b}}</p>');

        count++;
    });
});

我知道原因可能是因为ng-model需要在页面加载开始时才可用，但是如何添加这样的新行呢？

Answer 1

不使用jQuery，而是使用ng-repeat directive添加模型定义的行：

angular.module("app",[])
.controller("ctrl", function($scope) {
    var vm = $scope;
    vm.rowList = [{valueA: "itemA", valueB: "itemB"}];
    vm.addRow = function() {
        vm.rowList.push({});
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <table>
    <tr ng-repeat="row in rowList">
        <td>{{$index}}</td>
        <td><input type="text" ng-model="row.valueA"></td>
        <td><input type="text" ng-model="row.valueB"></td>
    </tr>
  </table>

  <input type="button" value="Add Row" name="addRow"
         ng-click="addRow()">

  <div>
    <p ng-repeat="row in rowList">
     row={{$index}} {{row.valueA}} {{row.valueB}}
    </p>
  </div>
</body>

在上面的示例中，rowList是一个对象数组。每个对象为每行定义Model。要添加新行， addRow 按钮使用ng-click directive来调用addRow函数，该函数将新对象推送到rowList数组。

动态地将新的ng-model添加到angularJS

1 个答案: