javascript 将项目推送到 Json 数组 angularjs

Pushing Item to Json Array angularjs

提问by Big Ticket

I am new to angularjs. I am currently doing a mobile app with ionic (that's why I have to use angularjs). I have an array and I created a add form with a button so that I can add item in the array. I have created some dummy data first because I want to test it around. I am not sure how to implement an add button so that user can add the item to that array (tempData).

我是 angularjs 的新手。我目前正在做一个带有 ionic 的移动应用程序（这就是我必须使用 angularjs 的原因）。我有一个数组，我创建了一个带有按钮的添加表单，以便我可以在数组中添加项目。我首先创建了一些虚拟数据，因为我想对其进行测试。我不确定如何实现添加按钮，以便用户可以将项目添加到该数组 (tempData)。

Here is my code.

这是我的代码。

json-dummyObject.js

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

Here is my add form

这是我的添加表单

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

Finally this is my controller:

最后这是我的控制器：

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

回答by Erazihel

Well, you can call methods from your factory so you can do something like this:

好吧，你可以从你的工厂调用方法，这样你就可以做这样的事情：

1. Add the data in the $scope.tempDatain the $scope.addfunction from the controller
2. Create a method in your WebApifactory to update the tempDataarray
3. Call this method from the controller's $scope.addfunction

1. 在控制器$scope.tempData的$scope.add函数中添加数据
2. 在您的WebApi工厂中创建一个方法来更新tempData数组
3. 从控制器的$scope.add函数中调用此方法

So, in your controller:

因此，在您的控制器中：

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

And in your factory:

在您的工厂：

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