我正在为一个简单的待办事项应用程序的UI工作，我有后端开发，我正在尝试实现前端的功能，但我有点挣扎。我想实现一个搜索和更新功能，但到目前为止我没有太多运气。帮助会很棒。
index.js
function TodoCtrl($scope) {
$scope.todos = [
{id:1, text:'Mow the lawn', selected:false},
{id:2, text:'Wash the car', selected:false}
];
$scope.getTotalTodos = function () {
return $scope.todos.length;
};
$scope.addTask = function () {
$scope.todos.push({text:$scope.text, id:$scope.id, date_created:Date.now, selected:false});
$scope.text= '';
$scope.id= '';
};
$scope.removeTask = function () {
$scope.todos = _.filter($scope.todos, function(todo){
return !todo.selected;
});
};
$scope.showDetails = function(task_id) {
var found = $filter('filter')($scope.todos, {id: task_id}, true);
if (found.length) {
$scope.selected = JSON.stringify(found[0]);
} else {
$scope.selected = 'Not found';
}
}
$scope.updateTask = function (task_id) {
// search $scope.todos for the item to update
var indexOfTask;
for(var i=0;i<$scope.todos.length;i++) {
if($scope.todos[i].id===$scope.id)
indexOfTask = i;
$scope.todos[i] = todo;
$scope.todos.push();
$scope.text= '';
$scope.id= '';
}
// update the todo
};
}
的index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<header>Todo App</header>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//use.edgefonts.net/vast-shadow:n4:all.js"></script>
<script src="//use.edgefonts.net/vast-shadow:n4:all;megrim.js"></script>
</head>
<body>
<div class="todo-wrapper" ng-controller="TodoCtrl">
<h2>You have <span class="emphasis">{{getTotalTodos()}}</span> tasks</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.selected"/>
<span class="selected-{{todo.selected}}">{{todo.id}}: {{todo.text}} {{todo.date_created}}</span>
</li>
</ul>
<form>
<input class="add-input" placeholder="id" type="text" ng-model="id" ng-model-instant />
<input class="add-input2" placeholder="task name" type="text" ng-model="text" ng-model-instant />
<button class="add-btn" ng-click="addTask()"><h2>Add</h2></button>
<button class="search-btn" ng-click="showDetails(task_id)"><h2>Search</h2></button>
</form>
<button class="update-btn" ng-click="updateTask(task)"><h3>Update Task</h3></button>
<button class="clear-btn" ng-click="removeTask()">Remove Task</button>
</div>
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
答案 0 :(得分：1)
您应该直接在ng-repeat内添加与待办事项相关的所有内容，以便更容易引用todos数组中的项目。
请查看更新后的fiddle或以下演示。 （我已经评论过你的css，以便更容易调试应用程序。）
接下来，您必须实施ng-resource或自定义$http工厂才能进行服务器更新。
带过滤的showDetails方法也应该有用。我刚刚将其添加到ng-repeat，因此更容易显示已过滤的结果。
angular.module('demoApp', [])
.controller('todoCtrl', TodoCtrl);
function TodoCtrl($scope) {
$scope.todos = [{
id: 1,
text: 'Mow the lawn',
selected: false
}, {
id: 2,
text: 'Wash the car',
selected: false
}];
$scope.id = $scope.todos.length + 1; //later create an uuid
$scope.getTotalTodos = function () {
return $scope.todos.length;
};
$scope.addTask = function () {
$scope.todos.push({
editMode: false,
text: $scope.text,
id: $scope.id,
date_created: Date.now,
selected: false
});
$scope.text = '';
$scope.id = '';
};
$scope.removeTask = function (todo) {
/*$scope.todos = _.filter($scope.todos, function (todo) {
return !todo.selected;
});*/
$scope.todos.pop(todo);
//update server now with ngResource...
};
$scope.showDetails = function (task_id) {
var found = $filter('filter')($scope.todos, {
id: task_id
}, true);
if (found.length) {
$scope.selected = JSON.stringify(found[0]);
} else {
$scope.selected = 'Not found';
}
}
$scope.editTask = function(todo) {
todo.editMode = true;
console.log(todo);
};
$scope.save = function(todo) {
todo.editMode = false;
// update data at server now too. $scope.todos is up-to-date
}
$scope.updateTask = function (task_id) {
// search $scope.todos for the item to update
var indexOfTask;
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === $scope.id) indexOfTask = i;
$scope.todos[i] = todo;
$scope.todos.push();
$scope.text = '';
$scope.id = '';
}
// update the todo
};
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
<script type="text/ng-template" id="partials/edit-form.html">
<div ng-show="todo.editMode">
<input ng-model="todo.text" />
<button ng-click="save(todo)">save</button>
</div>
</script>
<div class="todo-wrapper" ng-controller="todoCtrl">
<h2>You have <span class="emphasis">{{getTotalTodos()}}</span> tasks</h2>
<input type="text" ng-model="searchText" placeholder="enter search term...." />
<ul>
<li ng-repeat="todo in todos | filter: searchText">
<input type="checkbox" ng-model="todo.selected" /> <span class="selected-{{todo.selected}}">{{todo.id}}: {{todo.text}} {{todo.date_created}}</span>
<div ng-include="'partials/edit-form.html'"></div>
<button class="clear-btn" ng-click="removeTask(todo)">Remove</button>
<button class="clear-btn" ng-click="editTask(todo)">Edit</button>
</li>
</ul>
<form>
<input class="add-input" placeholder="id" type="text" ng-model="id" ng-model-instant />
<input class="add-input2" placeholder="task name" type="text" ng-model="text" ng-model-instant />
<button class="add-btn" ng-click="addTask()">
<h2>Add</h2>
</button>
<!--<button class="search-btn" ng-click="showDetails(task_id)">
<h2>Search</h2>
</button>-->
</form>
<!--<button class="update-btn" ng-click="updateTask(task)">
<h3>Update Task</h3>
</button>-->
</div>
<!-- <script src="js/index.js"></script>-->
<div>