Comment définir les objets de tableau int json object avec AngularJS?

Question

je veux charger les objets du tableau de contrôle multi select, puis je veux charger l'objet modèle nommé "name" avec son nom et son âge, puis je veux charger array de select et charger dans l'objet modèle .... mais le ng-modèle à partir du contrôle de sélection ne fonctionne pas:/

<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." /> 
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." /> 

<!--Select pets for model person--> 
<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple> 
    <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option> 
</select> 


<script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) { 

    $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] }; 

    $scope.arrayFromApi = function() { 
      ...... 
     this function get id names 
    } 
}); 
</script> 

Answer 1

Vous aurez probablement besoin d'utiliser ng-options. Vous pouvez faire un essai avec ng-repeat, mais il devrait être sur l'étiquette d'option seulement.

Answer 2

Évitez d'utiliser ng-repeat dans les listes déroulantes, cela pose quelques problèmes de performances. utilisez plutôt ng-options.

Et pour avoir le modèle avec le nom, l'âge et les animaux domestiques. Vérifiez la fonction mixData.

<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." /> 
    <input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." /> 

    <!--Avoid ng-repeat in dropdowns--> 
    <!--Select pets for model person--> 
    <select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi"> 
     <option value="">Select...</option> 
    </select> 

    <!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple> 
     <option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option> 
    </select>--> 


    <script> 
     var app = angular.module("myApp", []); 
     app.controller("myCtrl", function($scope) { 

     $scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] }; 

     $scope.arrayFromApi = function() { 
       ...... 
      this function get id names 
     } 

     $scope.mixData = function(){ 
      $scope.model.pets = $scope.myPets; 
     }; 
    }); 
    </script> 

Answer 3

Il est beaucoup mieux si vous utilisez select comme normes angulaires ng-options avec cet attribut, vous pouvez gérer tout votre point de vue et le réseau multiple de retour de type à votre contrôleur comme {id: n}

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 

 
    $scope.model = {}; 
 

 
    //from api 
 
    $scope.arrayFromApi = [{ 
 
     id: 1, 
 
     name: 'test' 
 
    }, 
 
    { 
 
     id: 2, 
 
     name: 'test2' 
 
    } 
 
    ]; 
 

 
    $scope.getDetails = function() { 
 
    console.log($scope.model); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <input type="text" ng-model="model.name" placeholder="Put your name..." /> 
 
    <input type="text" ng-model="model.age" placeholder="Put your age..." /> 
 

 
    <!--Select pets for model person--> 
 
    <select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select> 
 

 
    <button ng-click="getDetails()">save</button> 
 
</div>