使用雙向綁定動態地將對象從角度視圖添加到數組到控制器

Question

我有一個控制器，控制器的模板/視圖如下，

myController的

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

我的看法

<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實現這一點，如果有動態查看添加新指令模板，如何將對象添加到數組中。

Answer 1

在Angular中，你應該避免考慮動態控制。

這是方法

您想列出firstname，lastname對象
您想要將新對象添加到此列表中。

 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>

請注意，這些只是談論模型。 這是一個插件

使用雙向綁定動態地將對象從角度視圖添加到數組到控制器

問題描述

1 個解決方案

解決方案1
21 已采納 2015-02-20 07:37:45

使用雙向綁定動態地將對象從角度視圖添加到數組到控制器

問題描述

1 個解決方案

解決方案1 21 已采納 2015-02-20 07:37:45

解決方案1
21 已采納 2015-02-20 07:37:45