我有json文件：
test.json:
{
"MyTest": [{
"Main": {
"static": {
"name": "TestName1"
},
"dynamic": {
"testkey01": "testkey01data",
"testkey02": 40,
"testkey03vals": [1, 1, 1]
}}
}, {
"Main": {
"static": {
"name": "TestName2"
},"dynamic": {
"testkey01": "test01value",
"testkey03": 10,
"testflags": ["Test"]
}}
}, {
"Main": {
"static": {
"name": "TestName3"
},"dynamic": {
"testkey01": "testkey01value for TestName3",
"testnumber": 30
}}
}]
}
我想使用AngularJS对此json数据执行添加，编辑/更新和删除操作。
我做了以下事情：
的index.html：
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest" >
<td>{{value.Main.static.name}} </td>
<td><a ng-href="editName.html">Edit</a></td>
<td><button id="button1" ng-click="add(value.Main.static.name)">Add</button></td>
</tr>
</tbody>
</table>
</div>
<br><br>
<br>
<table border="1" class="table">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in jsonNames" >
<td>{{name}}</td>
<td><button id="button1" name="singlebutton" ng-click="delete(name)">Delete</button></td>
</tr>
<tr ng-hide="myTestJson.MyTest.length">
<td colspan="3">
<p>No Names</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
editName.html：
<!DOCTYPE html>
<html>
<title>Edit and Update JSON data</title>
<div>
<table><tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest.Main.dynamic" >
<td><label>{{key}}: </label>
<input placeholder="" type="text" ng-model="value">
</td>
</tr>
</tbody>
</table>
<button value="Update and Save" id="saveButtonId" ng-href="index.html" ng-click="finishEdit">Update/Save</button>
</div>
</html>
app.js：
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http ) {
$http.get('test.json').success(function(response) {
$scope.myTestJson = response;
// console.log(JSON.stringify(response));
$scope.add = function (){
alert("add is called");
//$scope.myTestJson.push($scope.jsonNames);
$scope.myTestJson.push($scope.myTestJson, jsonNames);
};
$scope.delete = function (index){
$scope.myTestJson.splice(index,1);
alert("JSON Name is deleted");
}
$scope.saveUpdate = function (index) {
$scope.myTestJson[index] = $scope.dynamiceditedModel;
$scope.edited = -1;
};
//$scope.dynamiceditedModel=$scope.myTestJson;
});
});
一个。如果我单击Add按钮：则应在我的第二个表中添加相应的JSON名称数据。
湾如果我点击Edit按钮：然后单击相应的JSON名称＆＃34; dynamic＆＃34;字段选项应该是可编辑的（在editName.html上）然后应该在单击“更新/保存”按钮时保存（然后应该将其重定向到index.html）。
℃。如果我点击Delete按钮：则应删除相应的JSON名称。
我创建了Plnkr。我请求大家，请帮我解决这个问题，我该如何进行这些操作。提前谢谢。
答案 0 :(得分：2)
这是基于我们讨论的答案。这可能很长，因为我处理了所有文件并添加了它们，
首先，
<强>的index.html
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="test.json"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
<强> app.js
var app = angular.module('myApp', ['ui.router']);
app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
$rootScope.jsonNames = []
$rootScope.filteredArray = []
console.log($rootScope.myTestJson)
if($rootScope.myTestJson == undefined)
{
$http.get('test.json').success(function(response) {
$rootScope.myTestJson = response;
})
}
// console.log(JSON.stringify(response));
$scope.add = function (name){
alert("add is called");
//$scope.myTestJson.push($scope.jsonNames);
$rootScope.jsonNames.push(name);
console.log($rootScope.jsonNames)
};
$scope.delete = function (index){
$rootScope.jsonNames.splice(index,1);
alert("JSON Name is deleted");
}
console.log($stateParams.edit != undefined)
if($stateParams.edit != undefined){
console.log($rootScope)
$rootScope.id = $stateParams.edit
}
$scope.saveUpdate = function (index) {
console.log($rootScope.myTestJson)
$state.go('home')
};
//$scope.dynamiceditedModel=$scope.myTestJson;
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html',
controller: 'TestCtrl',
})
.state('edit', {
url: '/edit/:edit',
templateUrl: 'edit.html',
controller: 'TestCtrl',
});
});
<强> main.html中
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest" >
<td>{{value.Main.static.name}} </td>
<!-- <td>{{$index}} </td> -->
<td><a ui-sref="edit({edit: $index})">Edit</a></td>
<td><button id="button1" ng-click="add(value)">Add</button></td>
</tr>
</tbody>
</table>
<br><br>
<br><p>Second Table:</p>
<table border="1" class="table">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in jsonNames" >
<td>{{value.Main.static.name}}</td>
<td><button id="button1" name="singlebutton" ng-click="delete($index)">Delete</button></td>
</tr>
<tr ng-hide="jsonNames.length > 0">
<td colspan="3">
<p>No Names</p>
</td>
</tr>
</tbody>
</table>
</div>
<强> edit.html
<title>Edit and Update JSON data</title>
<div>
{{myTestJson.MyTest[id].dynamic}}
<table><tbody>
<tr ng-repeat="(key, value) in myTestJson.MyTest[id].Main.dynamic track by $index" >
<td><label>{{key}}: </label>
<input placeholder="" type="text" ng-model="myTestJson.MyTest[id].Main.dynamic[key]">
</td>
</tr>
</tbody>
</table>
<button value="Update and Save" id="saveButtonId" ng-click="saveUpdate()">Update/Save</button>
</div>
json文件与原样相同。
请整合这个，我会在你想要的地方解释它。
答案 1 :(得分：1)
你有十亿的错误。你应该从一些非常基本的东西开始，逐一尝试:)。我们都学习，需要时间练习，所以不要误解。
我修复了你的添加/删除错误，你可以在这里找到它的工作示例
http://plnkr.co/edit/fPjll5WqgrWCR00TUoaK?p=preview
更具体地说，我改变了什么：
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http ) {
// created new scope variabile
$scope.table2 = [];
$http.get('test.json').success(function(response) {
// removed functions from this scopes, there is no reason for it
$scope.myTestJson = response;
});
$scope.add = function (name){
// giving argument to this function
// pushing it to new variabile instead of old one
$scope.table2.push(name);
};
$scope.delete = function (name){
// argument name you was sending was just name
// you need to find index of it in array
index = $scope.table2.indexOf(name);
// and then splice it
$scope.table2.splice(index,1);
}
$scope.saveUpdate = function (index) {
// I didnt get to this..
$scope.myTestJson[index] = $scope.dynamiceditedModel;
$scope.edited = -1;
};
});
在HTML中我改变了这个：
// You had whole second table out of any controller
<body ng-app="myApp" ng-controller="TestCtrl">