我正在使用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);
};