将项目推送到Json数组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; 
    } 
}