编辑/更新数组

时间:2015-07-23 15:26:29

标签: javascript arrays

我正在使用angularjs处理数组。我可以使用push添加数组。但是,我不知道如何编辑现有数组。正如你所看到的,我有我的添加项的推送方法,这是正常的。但是我应该怎么处理编辑按钮?

这是我的代码。

jsonData

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

        editData: function(newData) {
            tempData = newData;
        }

    });

添加并保存按钮

<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>
  <a class="button" ng-click="edit()">save</a>
            </div>
        </ion-content>

    </ion-view>

控制器js

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

    $scope.edit = function() {

        WebApi.editData($scope.tempData);
    };

0 个答案:

没有答案