我有一个模型X,它代表了一个任务。 我想为模型添加一些属性。单击“执行”按钮时,我想将“doRequested”属性添加到单击的特定x模型中。单击基金按钮时,我想为该特定任务添加特定属性。此外,我想在创建任务时向当前用户添加admin属性集。这些属性必须始终与该特定任务相关联,以便任务“task.attributeName”将为该属性提供准确的值。
这种事情是否意味着要在AngularJs中完成?如何修改$ scope.todoList,以便todoList中的每个项目都具有与之关联的todoText,todoAdmin:,doRequested,fundRequested属性:
$scope.todoList.push({todoText:$scope.todoInput, done:false});
由于我来自Rails背景,这看起来太复杂了,我不知道如何。
以下是我的观点:
<div ng-app="facebookExample" view-title="Tasks">
<div ng-controller="todoController">
<h1>Tasks</h1>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<!-- The actual input tag which is bound to the todoInput using ng-model -->
<input type="text" placeholder="Add New Item" ng-model="todoInput" size="100">
</label>
<!-- Our button thay will call our funtion to add a new todo item -->
<button class="button button-small" ng-click="todoAdd()">
Add Task
</button>
</div>
<div ng-repeat="x in todoList">
<li class="item item-checkbox">
<label class="checkbox">
</label>
<!-- this is the checkbox element, you will see it is bound to the done setting in the items array -->
<!-- When clicked it calls the update function to update the item to its done status -->
<input type="checkbox" ng-model="x.done" ng-click="update()"/>
<!-- this is a span tag that shows the item text, I am using ng-bind, instead of the span tag we could have used {{x.todoText}} as well -->
<button class="fund-button" style= "float: left;" ng-click="fund(x)">Fund</button>
<span>{{x.todoText}}</span>
<button class="doButton" style= "float: right; margin-right: 2px;" ng-click="do(x)">Do</button>
</li>
</div>
<!-- the remove button will call the remove function and remoave all items that are marked done -->
<button class="button button-block button-assertive" ng-click="remove()">Remove Checked Tasks
</button>
</div>
</div>
我的控制员:
facebookExample.controller('todoController', ['$scope', function($scope) {
// Initialize the todo list array
//if local storage is null save the todolist to local storage
$scope.todoList = [];
if (localStorage.getItem("mytodos") === null)
{
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
}else
{
//set the todolist from local storage
$scope.todoList = angular.fromJson(localStorage.getItem("mytodos"));
}
// Add an item function
$scope.todoAdd = function() {
//check to see if text has been entered, if not exit
if ($scope.todoInput === null || $scope.todoInput === ''){return;}
//if there is text add it to the array
$scope.todoList.push({todoText:$scope.todoInput, done:false});
//clear the textbox
$scope.todoInput = "";
//resave the list to localstorage
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
};
//Do button
$scope.do = function(){
};
$scope.doForFree = function(x){
};
//fund button
$scope.fund = function(x){
};
$scope.remove = function() {
//copy list
var oldList = $scope.todoList;
//clear list
$scope.todoList = [];
//cycle through list
angular.forEach(oldList, function(x) {
//add any non-done items to todo list
if (!x.done) $scope.todoList.push(x);
});
//update local storage
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
};
//The Update function
//This waits 100ms to store the data in local storage
$scope.update = function() {
//update local storage 100 ms after the checkbox is clicked to allow it to process
setTimeout(function(){
localStorage.setItem("mytodos", angular.toJson($scope.todoList));
},100);
};
}]);