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