Pousser l'Élément de Tableau Json angularjs

Je suis nouveau sur angularjs. Je suis actuellement en train de faire une application mobile avec ionique (c'est pourquoi je dois utiliser angularjs). J'ai un tableau et j'ai créé un formulaire d'ajout d'un bouton pour que je puisse ajouter un élément dans le tableau. J'ai créé quelques données factices d'abord parce que je veux le tester autour de. Je ne suis pas sûr de la façon de mettre en œuvre un bouton ajouter afin que l'utilisateur puisse ajouter un élément de tableau (tempData).

Voici mon code.

json-dummyObject.js

angular.module('app')
.factory('WebApi', function () {
var owners = [{
value: "Amy",
text: "Amy",
}, {
value: "Peter",
text: "Peter"
}, {
value: "Jim",
text: "Jim"
}];
var sex = [{
value: "Male",
text: "Male",
}, {
value: "Female",
text: "Female"
}];
var country = [{
value: "Canada",
text: "Canada",
}, {
value: "US",
text: "United States"
},{
value: "China",
text: "China"
}];
var tempData = [];
var someDate = new Date();
//Display 100 dummy item 
for (var i = 0; i < 100; i++) {
var selectedCountry = country[Math.floor((Math.random() * country.length))];
var selectedSex = sex[Math.floor((Math.random() * sex.length))];
var selectedOwners = owners[Math.floor((Math.random() * owners.length))];
tempData.push({
id: i,
owners: selectedOwners.text,
country: selectedCountry.text,
sex: selectedSex.text,
})
};
return {
getAll: function () {
return tempData;
},
getCountry: function(){
return selectedCountry.text;
},
getSex: function(){
return selectedSex.text;
},
getOwners: function(){
return selectedOwners.text;
}
}
});

Voici mon formulaire d'ajout d' 

<ion-view>
<ion-header-bar class="bar bar-header bar-energized">
<h1 class="title" style="color:black"> Add Data </h1>
</ion-header-bar>
<ion-content>
<div ng-controller="addCtrl">
<form name="addForm" ng-submit="submitForm()">
<label class="item item-input item-select">
<b class="input-label">Owner:</b>
<select ng-model="newOwner" required>
<option value="" title="Select Owner" selected disabled>Owner</option>                      
<option ng-repeat="owner in owners" value="{{owner.value}}"
ng-selected="{{owner.value== owners}}">
{{owner.value}}
</option>
</select>
</label>
<label class="item item-input item-select">
<b class="input-label">Sex:</b>
<select ng-model="newSex" required>
<option value="" title="Select Sex" selected disabled>Sex</option>                      
<option ng-repeat="sexItem in sex" value="{{sexItem.value}}"
ng-selected="{{sexItem.value== sex}}">
{{sexItem.value}}
</option>
</select>
</label>
<label class="item item-input item-select">
<b class="input-label">Country:</b>
<select ng-model="newCountry" required>
<option value="" title="Select Sex" selected disabled>Sex</option>                      
<option ng-repeat="countryItem in country" value="{{countryItem.value}}"
ng-selected="{{countryItem.value== country}}">
{{countryItem.value}}
</option>
</select>
</label>
<a class="button" ng-click="add()">Add to List</a>
</div>
</ion-content>
</ion-view>

Enfin c'est mon contrôleur:

 angular.module('app')
.controller('addCtrl', function ($scope,WebApi) {
$scope.country = WebApi.getCountry();
$scope.sex = WebApi.getSex();
$scope.owners = WebApi.getOwners();
$scope.tempData = WebApi.getAll();
$scope.add = function(){
//Not sure how to get it work (Need help here
}
});
  • S'il vous plaît créer un JSFiddle pour que je puisse voir ce que l'erreur que vous recevez. Je n'arrive pas à voir ce problème que vous rencontrez.
  • Salut Brian, je n'ai pas d'erreur jusqu'à présent, ce que je veux, je veux savoir comment utiliser le $scope.ajouter = function(){ //Problème } ici. C'est parce que je sais que j'ai quelques aléatoire des données factices et je la pousse dans le tableau 'tempData pour que je puisse l'afficher. Cependant, je suis bloqué dès maintenant, parce que je ne suis pas sûr si je peux encore utiliser le même tableau var tempData = []; pour ajouter un élément à partir de mon formulaire d'ajout d'
InformationsquelleAutor Big Ticket | 2015-07-20
  1. 1

    Bien, vous pouvez appeler les méthodes à partir de votre usine de sorte que vous pouvez faire quelque chose comme ceci:

    1. Ajouter les données dans la $scope.tempData dans le $scope.add fonction du contrôleur
    2. Créer une méthode dans votre WebApi usine pour mettre à jour le tempData tableau
    3. Appeler cette méthode à partir du contrôleur $scope.add fonction

    Donc, dans votre contrôleur:

    $scope.add = function() {
$scope.tempData.push({
id: $scope.tempData.length,
owners: owner.value,
country: countryItem.value,
sex: sexItem.value
});
WebApi.updateData($scope.tempData);
};

    Et dans votre usine:

    return {
getAll: function () {
return tempData;
},
getCountry: function(){
return selectedCountry.text;
},
getSex: function(){
return selectedSex.text;
},
getOwners: function(){
return selectedOwners.text;
},
updateData: function(newData) {
tempData = newData;
}
}
    • Salut Erazihel, je vous remercie pour votre répondre. Cependant, je me demande en vertu de l' $champ d'application.tempData.push. Si je dois utiliser, les propriétaires: $champ d'application.newOwner, puis-je faire de cette façon et la définition de la ng-model dans le formulaire d'ajout d'?
    • Vous pouvez simplement utiliser une méthode de pousser la nouvelle valeur à partir de votre contrôleur pour le tableau dans votre usine. Dans votre usine, ajouter une fonction dans votre objet retourné: addOwner: function(newOwner) { propriétaires.push(newOwner) }; et dans votre contrôleur, dans le $scope.la fonction d'ajout: WebApi.addOwner($champ d'application.newOwner);
    • il a travaillé merci 🙂
    InformationsquelleAutor Erazihel