web-dev-qa-db-ja.com

angular双方向バインディングを使用したコントローラーへのビューからの配列へのオブジェクトの動的な追加/作成

次のように、コントローラーのテンプレート/ビューが1つあります。

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>

ここでは、ユーザーがデータを入力するたびに、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双方向バインディングを使用したユーザー入力によって動的に追加されたビューを介して入力される必要があります。しかし、角度でこれを達成する方法、動的に表示するために追加された新しいディレクティブテンプレートです。

javascriptangularjsangularjs-directiveangularjs-scope
9
santosh kore

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>

これらは単にモデルについて話していることに注意してください。これがプランクです

21
Abhinav Gujjar