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