Angularjs问题附加表

Question

我正在学习 Angularjs（我还是很新鲜）。我正在尝试在单击按钮时向表中添加一行。我基于本教程中的代码 - http://plnkr.co/edit/64e1nGNkc4vYynEY6IQz?p=preview

我的代码附加了内容，但它忽略了 and 标签，它正在添加标签。此外，我尝试只附加一个简单的字符串，如“test”，它会在字符串中添加标签......为什么它会添加我没有包含的标签？

我的html -

      <div ng-controller="growingTable">
        <div ng-controller="incomeController">
          <table class="table table-striped">
            <tr>
              <td>Account</td>
              <td>Budget</td>
              <td>%</td>
              <td>Enter Amount</td>
              <td>Total</td>
              <td>%</td>
            </tr>
            <tr>
              <tr ng-repeat="r in rows">
                <td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
                <td><input class="form-control" ng-model="r.funding.startingEstimate"y placeholder="Budgeted"></td>
                <td class="warning">20%</td>
                <td>{{funding.needed}}</td>
                <td class="warning">$500</td>
                <td class="warning">50%</td>
              </tr>
            </table>
            <button class="btn btn-primary"ng-click="addField()">ADD FIELD</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Javascript -

var app = angular.module('myApp', []);
app.controller('incomeController', function($scope) {
 $scope.funding = { startingEstimate: 0 };
 computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate / 100;
};
$scope.$watch('funding.startingEstimate', computeNeeded);
});

app.controller('growingTable', function($scope){
$scope.rows = [];

$scope.addField = function(){
    $scope.rows.push({        
    });
}    
});    

这是在表中的行之后附加的代码。表格元素发生了什么？还有为什么要加span标签？？

<input class="form-control ng-scope" placeholder="Account">
<input class="form-control ng-scope ng-pristine ng-valid" placeholder="Budgeted" ng-model="funding.startingEstimate">
<span class="ng-scope ng-binding">20%$50050%</span>

谢谢！

Answer 1

另一种方法是在控制器中创建一个数组，然后使用 ng-repeat 生成表。这样，您的“添加字段”函数只需要在数组上创建一个新元素，Angular 就会为您处理更新 html。

例如，您的 html 将是：

<div ng-app="app">
<div ng-controller="growingTable">
<table>
    <tr ng-repeat="r in rows">
        <td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
        <td><input class="form-control" ng-model="r.startingEstimate" placeholder="Budgeted"></td>
        <td class="warning">20%</td>
        <td>{{r.needed}}</td>
        <td class="warning">$500</td>
        <td class="warning">50%</td>
     </tr>
</table>

 <button ng-click="addField()">ADD FIELD</button>
        <br>
           {{rows}}
 </div>

你的应用看起来像：

angular.module('app', []);

angular.module('app').controller('growingTable', function($scope){
$scope.rows = [];

$scope.addField = function(){
    $scope.rows.push({
        account : '',
        startingEstimate : '',
        needed : ''
    });
}

});

你会找到一个工作版本http://jsfiddle.net/y53Yd/