使用双向绑定从 angular 视图到控制器动态 adding/creating 对象到数组

Question

我有一个控制器，控制器的template/view如下，

我的控制器

angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
        $scope.myObject = {};
}]);

myView

<div class="container" ng-app="myApp">
    <form name="myForm" novalidate ng-controller="myController">
        <div class="form-group">
            <label for="firstname" class="control-label col-xs-2">Name</label>
            <div class="col-xs-10">
                <input type="text" ng-model="myObject.firstname" id="firstname">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="control-label col-xs-2">LastName</label>
            <div class="col-xs-10">
                <input type="text" ng-model="myObject.lastname" id="lastname">
            </div>
        </div>
    </form>
</div>

在这里，每当用户输入任何数据时，它都会反映到 myObject，firstname 和 lastname 作为 myObject 的动态属性。现在我的新要求是在同一视图中为 firstname 和 lastname 添加多个动态视图（为此我将创建一个指令并动态附加），现在我想要 myObject像

一样array of objects

myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]

这里每个对象都应该使用 angular 双向绑定通过用户输入动态添加的视图来填充。但是我不确定如何使用 angular 实现此目的，每当有新的指令模板添加到动态视图时如何将对象添加到数组。

Answer 1

在Angular中你应该避免考虑动态控制。

这是方法

您想列出名字、姓氏对象
您想将新对象添加到此列表。

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: ''
    })
  }
});

<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.firstName}} {{item.lastName}}
  </div>
  <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>

注意这些只是在谈论模型。这是一个笨蛋

使用双向绑定从 angular 视图到控制器动态 adding/creating 对象到数组

Dynamically adding/creating object to array from angular view to controller using two way binding

javascript

angularjs

angularjs-directive

angularjs-scope