次のコードでは、リストの削除リンクからアイテムを削除するたびに、リストからアイテムが削除されるだけで、現在選択されているアイテムは削除されません。（クリックすると表示される項目）。ただし、現在選択されているアイテムの横にある削除リンクをクリックすると、両方の場所から削除されます。
私が見ているものを複製するには：
- テキストボックスに入力してEnterキーを数回押して、一連のアイテムを追加します。
- リストから項目の 1 つを選択します。
- アイテムが下に表示されたら、アイテムの横にある [削除] をクリックします。
- これは正しい動作です。
- 以前に作成した別のアイテムを選択します。
- リスト内のアイテムの横にある削除リンクをクリックします。
- アイテムはリストから削除されますが、現在表示されているアイテムは削除されません。
コードにステップインすると、リストの削除リンクをクリックすると $scope.currentUser が未定義になります。
なぜこうなった？
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/User/:id', {
controller: UserCtrl,
template: '<h1>{{currentUser.name}}</h1> <a ng-click="deleteUser(currentUser.id)">delete me</a>'
});
});
app.factory('userSvc', function(){
return new UserService();
});
function UserCtrl($scope, $routeParams, $location, userSvc) {
var currUser = userSvc.getUser($routeParams.id);
$scope.currentUser = currUser;
$scope.users = userSvc.getAllUsers();
$scope.addUser = function () {
var user = {
id: userSvc.nextId(),
name: $scope.addUserName
};
userSvc.addUser(user);
$scope.addUserName = '';
$location.url('/User/' + user.id);
};
$scope.deleteUser = function(id) {
if($scope.currentUser != null && $scope.currentUser.id == id) {
$scope.currentUser = null;
}
userSvc.delete(id);
};
};
function UserService() {
var users = [{id: 1, name: 'Ben' }];
this.delete = function(id) {
for(var i = 0; i < users.length; i++) {
var user = users[i];
if(user.id == id) {
users.splice(i,1);
}
}
};
this.addUser = function(user) {
users.push(user);
};
this.getAllUsers = function() {
return users;
};
this.getUser = function(id) {
for(var i = 0; i < users.length; i++) {
var user = users[i];
if(user.id == id) {
return user;
}
}
};
this.nextId = function() {
var maxId = 0;
for(var i = 0; i < users.length; i++) {
var user = users[i];
maxId = Math.max(maxId, user.id);
};
return maxId + 1;
};
}
</script>
</head>
<body>
<div ng-controller="UserCtrl">
<form ng-submit="addUser()">
<input ng-model="addUserName" type="text"/>
<input type="submit" value="Add"/>
</form>
<ul>
<li ng-repeat="user in users"><a href="#/User/{{user.id}}">{{user.name}}</a> <a ng-click="deleteUser(user.id)">delete</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>