Нажимной элемент на Json Array angularjs

Question

Я новичок в angularjs. В настоящее время я занимаюсь мобильным приложением с ионным (поэтому я должен использовать angularjs). У меня есть массив, и я создал форму добавления с помощью кнопки, чтобы добавить элемент в массив. Сначала я создал некоторые фиктивные данные, потому что я хочу проверить его. Я не уверен, как реализовать кнопку добавления, чтобы пользователь мог добавить элемент в этот массив (tempData).

Вот мой код.

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; 
      } 
     } 
}); 

Вот мой добавь форма

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

Наконец это мой контроллер:

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 
      } 
    }); 

Answer 1

Ну, вы можете вызывать методы вашего завода поэтому вы можете сделать что-то вроде этого:

1. Добавить данные в $scope.tempData в функции $scope.add от контроллера
2. Создать метод в WebApi фабрике обновлять tempData массиву
3. этот метод из $scope.add функции контроллера

Так Зов , в вашем контроллере:

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

И на вашем заводе :

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; 
    } 
}