web-dev-qa-db-fra.com

Ajout / création dynamique d'un objet au tableau à partir de angular au contrôleur à l'aide de la liaison bidirectionnelle

J'ai un contrôleur, modèle/vue de contrôleur comme ci-dessous,

monContrôleur

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>

ici, chaque fois que l'utilisateur saisit des données, elles sont reflétées dans myObject avec firstname et lastname comme propriétés dynamiques pour myObject. Maintenant, ma nouvelle exigence est d'ajouter plusieurs vues dynamiques pour firstname et lastname dans la même vue (pour cela, je vais créer une directive et l'ajouter dynamiquement), et maintenant je veux myObject être un array of objects comme

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

et ici chaque objet doit être rempli via des vues ajoutées dynamiquement par entrée utilisateur en utilisant angular liaison bidirectionnelle. Mais je ne sais pas comment puis-je y parvenir avec angular, comment ajouter un objet au tableau chaque fois qu'il y a est un nouveau modèle de directive ajouté pour afficher dynamiquement.

javascriptangularjsangularjs-directiveangularjs-scope
9
santosh kore

Dans Angular vous devez éviter de penser en termes de contrôles dynamiques.

Voici l'approche

  1. Vous voulez lister les objets prénom, nom
  2. Vous souhaitez ajouter un nouvel objet à cette liste.
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>

Notez que ceux-ci parlent simplement de modèle. Voici un plunk

21
Abhinav Gujjar