gpt4 book ai didi

javascript - 使用两种方式绑定(bind)从 Angular View 到 Controller 动态添加/创建对象到数组

转载 作者:可可西里 更新时间:2023-11-01 02:54:01 26 4
gpt4 key购买 nike

我有一个 Controller , Controller 的模板/ View 如下,

我的 Controller

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

我的 View

<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>

在这里,每当用户输入任何数据时,它都会反射(reflect)到 myObject 中,firstnamelastname 作为 myObject 的动态属性>。现在我的新要求是在同一 View 中为 firstnamelastname 添加多个动态 View (为此我将创建一个指令并动态附加),现在我想要myObject 成为一个对象数组,例如

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

这里每个对象都应该通过用户输入使用 Angular 双向绑定(bind)动态添加的 View 来填充。但是我不确定如何使用 Angular 实现这一点,如何在添加新指令模板以动态查看时将对象添加到数组。

最佳答案

在 Angular 中,您应该避免考虑动态控件。

方法是这样的

  1. 您想列出名字、姓氏对象
  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: ''
})
}
});
<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>

请注意,这些只是在谈论模型。这是一个小插曲

关于javascript - 使用两种方式绑定(bind)从 Angular View 到 Controller 动态添加/创建对象到数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28622309/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com