Javascript 如何使用AngularJS对JSON数据执行添加、编辑和删除操作？
我有json文件：Javascript 如何使用AngularJS对JSON数据执行添加、编辑和删除操作？,javascript,angularjs,json,angularjs-1.5,Javascript,Angularjs,Json,Angularjs 1.5,我有json文件： test.json: { "MyTest": [{ "Main": { "static": { "name": "TestName1" }, "dynamic": { "testkey01": "testkey01data", "testkey02": 40, "testke
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
}}
}]
}
<!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>
AddEdit动态editName.htmlindex.htmlDelete我创造了。我请求你们大家在这方面帮助我如何执行这些操作。提前感谢。你有十亿个错误。你应该明确地从一些真正基本的东西开始，然后一个接一个地尝试：）。我们都在学习，需要时间来练习，所以不要误会 我修复了你的添加/删除错误，你可以在这里找到它的工作示例
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;
};
});
// You had whole second table out of any controller
<body ng-app="myApp" ng-controller="TestCtrl">
//任何控制器都有一整张第二张表
<!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>
<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>
<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>
<!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>
<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>
<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>
名称
编辑
添加
{{value.Main.static.name}
编辑
添加
第二张表：
名称
删除
{{value.Main.static.name}
删除
没有名字
<!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>
<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>
<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数据
{{myTestJson.MyTest[id].dynamic}
{{key}}：
更新/保存
请整合这个，我会在你想要的地方解释。我打赌有一种方法可以用JS解析和编辑文件，但是这不是你想要使用的常规方法。通常，您只需从JSON获取数据并将其存储在可以使用的变量中：）@Andurit，感谢您的回复，是的，我只将JSON数据存储在$scope.myTestJson中。如果单击add会发生什么情况？@Sravan，如果单击add，则应将相应的JSON名称数据添加到我的第二个表中。（例如，如果我们单击add以获取数据。）“TestName1”然后“TestName1”应该添加到我的第二个表的Name列下，这样“TestName1”将有它自己的数据（静态和动态字段数据），我可以下载它。当单击add时，您只需要在第二个表中显示名称？谢谢您的回复，但我只能看到Name on add选项（这很好），我只能看到添加的名称，但它也应该有自己的数据。例如，如果我们单击TestName1，那么它应该保持：“Main”：{“static”：{“name”：“TestName1”}，“dynamic”：{“testkey01”：“testkey01data”，“testkey02”：40，“testkey03vals”：[1,1,1]}，这是我需要在我的控制台上以某种对象格式看到的，可以下载json文件。我可以知道它吗？是的，非常好的兄弟！！它按照我的要求运行良好！！我真的非常感谢你的帮助和支持！！我有一个问题，我可以知道你是否有空吗？我正在聊天中讨论它！例如，如果我更改了我的json结构（从“Main”到Main1、Main2和Main3），那么用ng repeat写什么呢？