使用两种方式绑定从角度视图到控制器动态添加/创建对象到数组 [英] Dynamically adding/creating object to array from angular view to controller using two way binding

查看：20
本文介绍了使用两种方式绑定从角度视图到控制器动态添加/创建对象到数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个控制器，控制器的模板/视图如下，

myController

angular.module('myApp', []).控制器('myController'，['$scope'，函数($scope){$scope.myObject = {};}]);

我的视图

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

</表单>

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

myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{名字:abc"，姓氏:xyz"}]

这里每个对象都应该通过用户输入使用角度双向绑定通过动态添加的视图来填充.但我不确定如何使用 angular 实现这一点，以及如何在添加新指令模板以动态查看时将对象添加到数组.

解决方案

在 Angular 中，你应该避免考虑动态控件.

这是方法

  1. 您想列出名字、姓氏对象
  2. 您想向此列表中添加一个新对象.

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.items = [];$scope.itemsToAdd = [{名: ''，姓: ''}];$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({名: ''，姓: ''})}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><body ng-app="plunker" ng-controller="MainCtrl"><p>你好{{name}}！</p><div ng-repeat="项目中的项目">{{item.firstName}} {{item.lastName}}

<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)">添加</button>

<div><button ng-click="addNew()">添加新</button>

请注意，这些只是在谈论模型.这是一个笨蛋

I have one controller, controller's template/view as below,

myController

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>

here whenever user enters any data it gets reflected to myObject with firstname and lastname as dynamic properties for myObject. Now my new requirement is to add multiple dynamic views for firstname and lastname in the same view(For that I will be creating a directive and appending dynamically), and now I want myObject to be an array of objects like

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

and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.

解决方案

In Angular you should avoid thinking in terms of dynamic controls.

Here is the approach

  1. You want to list firstname, lastname objects
  2. You want to add a new object to this list.

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>

Notice these are simply talking about model. Here is a plunk

这篇关于使用两种方式绑定从角度视图到控制器动态添加/创建对象到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆