2
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope){
$scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];
$scope.addName = function() {
// also need to get new date and time stamp it on item
$scope.date = new Date();
$scope.names.unshift($scope.enteredName);
$scope.enteredName = "";
};
$scope.removeName = function(name){
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
// array.splice(start, deleteCount[, item1[, item2[, ...]]])
// How do I push onto the ul
$scope.removed.push(name);
};
});
</script>
這是從Introduction to Angular JS in 50 Examples Part 1將角度數組數據推送/附加到HTML元素中？
我試圖讓從這個視頻分叉一個簡單的待辦事項列表中的介紹角JS在Youtube上的50例第1部分視頻。我想追加或推送刪除或檢查完成到各自的無序列表中的值。
這裏的HTML：
<body ng-controller="NameCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 jumbotron">
<form ng-submit="addName()">
<input type="text" ng-model="enteredName" class="form-control">
<input type="submit" class="form-control btn-primary" value="Add">
</form>
<ul style="padding: 0;">
<li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
{{ name }}
<button class="btn btn-xs btn-success pull-left" ng-click="removeName()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
<button class="btn btn-xs btn-danger pull-right" ng-click="removeName()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-success">
<h3>Completed</h3>
<ul class="removed" ng-model="removed">
<li class="list-group-item"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-danger">
<h3>Deleted</h3>
<ul class="removed" ng-model="removed">
<li class="list-group-item"></li>
</ul>
</div>
</div>
</div>
</body>
我只是工作的removeName（）函數。稍後將添加completedName（）函數。
來自jQuery，您可以在那裏寫現場的HTML元素，AngularJS是作爲一個noob的一個新領域。做一個搜索如何做到這一點，我得到了AngularJS指令的頁面，這對於這個目的有點過分。
** ng-model =「removed」in the test。看來你可以用這種方式鏈接數據，並且這會創建一個「$ scope.removed」，然後我想我可以使用這些數據。在我們找到工作答案之前可能會產生誤導。
建議感激。謝謝！
固定！
感謝您的快速回復。 按照的jsfiddle提到的，我做了以下修改：
<script>
<!-- must make variable app name THE SAME AS the ng-app name! -->
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope){
$scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];
$scope.removedNames = []; // added this
$scope.completedNames = []; // added this
$scope.date = new Date();
$scope.addName = function() {
// also need to get new date and time stamp it on item
$scope.names.unshift($scope.enteredName);
$scope.enteredName = "";
};
$scope.removeName = function(name){
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
$scope.removedNames.unshift(name + " DELETED AT " + $scope.date);
};
$scope.completeName = function(name){
var j = $scope.names.indexOf(name);
$scope.names.splice(j, 1);
$scope.completedNames.unshift(name + " COMPLETED AT " + new Date());
};
});
</script>
最後：
<body ng-controller="NameCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 jumbotron">
<form ng-submit="addName()">
<input type="text" ng-model="enteredName" class="form-control" placeholder="Enter task">
<input type="submit" class="form-control btn-primary" value="Add">
</form>
<ul style="padding: 0;">
<li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
{{ name }}
<button class="btn btn-xs btn-success pull-left" ng-click="completeName(name)"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button> <!-- added completeName(name) function -->
<button class="btn btn-xs btn-danger pull-right" ng-click="removeName(name)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <!-- altered removeName(name) function -- even though it still works without the name param... -->
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-success">
<h3>Completed</h3>
<ul class="completed">
<li class="list-group-item text-success text-center" ng-repeat="name in completedNames"> {{ name }} </li> <!-- altered this -->
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-danger">
<h3>Deleted</h3>
<ul class="removed">
<li class="list-group-item text-danger text-center" ng-repeat="name in removedNames"> {{ name }} </li> <!-- altered this -->
</ul>
</div>
</div>
</div>
</body>
添加名稱作爲參數：'NG點擊=「removeName（名稱）」' – devqon