我的问题是,当我试图从表中删除单个字段时,整个字段都在删除..在执行此操作后,当我尝试添加用户时,我的保存按钮无法正常工作,请帮我解决..TIA。 我的代码看起来像:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="TestApp" ng-controller="testController">
<h1>Simple Example with Angular List with crude features</h1>
<table class="table table-striped table-bordered">
<thead>
<tr><th>Sr</th><th>Name</th><th>Age</th><th>Action</th></tr>
</thead>
<tbody>
<tr ng-repeat="user in userList track by $index">
<td>{{$index + 1}}</td>
<td>
{{user.Name}}
</td>
<td>{{user.Age}}</td>
<td><div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="edit($index);"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="delete();"><i class="glyphicon glyphicon-trash"></i></button>
</div></td>
</tr>
</tbody>
</table>
<div class="">
<form class="form-horizontal">
<div class="form-group col-sm-4">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="test" class="form-control" id="name" placeholder="Name" ng-model="userObject.Name"/>
</div>
</div>
<div class="form-group col-sm-4">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="test" class="form-control" id="age" placeholder="Age" ng-model="userObject.Age"/>
</div>
</div>
<input type="hidden" ng-model="$scope.objectIndex" class="ng-valid">
<div class="btn-group col-sm-2">
<button type="button" class="btn btn-primary btn" ng-click="save()"><i class="glyphicon glyphicon glyphicon-ok-circle"></i>Save</button>
</div>
</form>
</div>
</body>
</html>
<script>
angular.module('TestApp', ['TestApp.controllers']);
angular.module('TestApp.controllers', []).controller('testController', function($scope) {
$scope.objectIndex = '';
$scope.userList = [
{
Name: 'Parvez Alam',
Age: '28'
},
{
Name: 'Sameer',
Age: '13'
},
{
Name: 'Rakesh',
Age: '55'
},
{
Name: 'Ramesh',
Age: '44'
},
{
Name: 'Aman',
Age: '34'
},
{
Name: 'John',
Age: '23'
}
];
$scope.edit = function(id) {
//search user and update it
$scope.objectIndex = id;
$scope.userObject = angular.copy($scope.userList[id]);
console.log($scope.objectIndex);
}
$scope.save = function() {
console.log($scope.objectIndex);
if($scope.userList[$scope.objectIndex] == null) {
//if this is new record, add it in users array
$scope.userList.push($scope.userObject);
} else {
//for existing record, find this record using id
//and update it.
$scope.userList[$scope.objectIndex] = $scope.userObject;
}
//clear the add record form
$scope.userObject = {};
$scope.objectIndex = '';
}
$scope.delete = function(id) {
//search record with given id and delete it
for(i in $scope.userList) {
if($scope.userList[i].id == id) {
$scope.userList.splice(i,1);
$scope.userList = {};
}
}
}
});
</script>