Question

我是角色新手，坚持使用动态数据绑定。我有四个数据字段2静态和2添加按钮后动态添加。当我点击添加按钮只有两个字段显示在显示屏上并显示剩余数据没有填充。我可能在数据传递方面犯了一些错误。前两个字段是静态的，后两个是动态需要添加的用户点击。使用表单时也是如此。请问任何人请帮我解决这个问题。提前致谢。以下是我的代码：

控制器：

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

app.controller('MainCtrl', function($scope) {

  $scope.items = [];

  $scope.itemsToAdd = [{
    firstName: '',
    lastName: ''
  }];

  $scope.add = function(itemToAdd) {

    var index = $scope.itemsToAdd.indexOf(itemToAdd);

    $scope.itemsToAdd.splice(index, 1);

    $scope.items.push(angular.copy(itemToAdd))
  }

  $scope.addNew = function() {

    $scope.itemsToAdd.push({
      firstName: '',
      lastName: ''
    })
  }
});

查看（HTML）：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <div ng-repeat="item in items">
     {{item.regno}} {{item.section}}
    {{item.firstName}} {{item.lastName}}
  </div>
    <input type="text" ng-model="itemToAdd.regno" />
    <input type="text" ng-model="itemToAdd.section" />
  <div ng-repeat="itemToAdd in itemsToAdd">
    <input type="text" ng-model="itemToAdd.firstName" />
    <input type="text" ng-model="itemToAdd.lastName" />
    <button ng-click="add(itemToAdd)">Add</button>
  </div>
  <div>
    <button ng-click="addNew()">Add new</button>
  </div>
</body>

Answer 1

你可以在添加后尝试：

$scope.$apply();

Answer 2

本节：

<div ng-repeat="itemToAdd in itemsToAdd">
 <input type="text" ng-model="itemToAdd.regno" />
 <input type="text" ng-model="itemToAdd.section" />

 <input type="text" ng-model="itemToAdd.firstName" />
 <input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>

在ng-repeat之外，因此不知道itemToAdd是什么;告诉它：

$scope.itemsToAdd = [{
  firstName: '',
   lastName: '',
  section: 'defaultSection',
  regno: 'defaultRegNo'
}];

但是这只会给你空显示，因为你没有在任何地方定义regno和section的默认值。在代码中定义它们：

 $scope.addNew = function() {

$scope.itemsToAdd.push({
  firstName: '',
   lastName: '',
  section: 'defaultSection',
  regno: 'defaultRegNo'
});
};

和

{{1}}

Answer 3

来自directives-that-create-scopes angular docs

某些指令（例如 ng-controller 和 ng-repeat ）会创建新的子作用域并将子作用域附加到相应的DOM元素

在你的情况下，

itemToAdd.regno & itemToAdd.section are different modals and in different scope

与itemToAdd.firstName & itemToAdd.lastName比较。

因此，regno & section不是ng-repeat内部itemToAdd的一部分。

这就是为什么，你无法进入$scope.items

您必须在regno & section功能

中添加add

$scope.add = function(itemToAdd) {

    itemToAdd.regno = $scope.itemsToAdd.regno;
    itemToAdd.section = $scope.itemsToAdd.section;


    $scope.items.push(angular.copy(itemToAdd))
    console.log($scope.items);
  }

Angular表单保存不使用动态推送数据

3 个答案: