在AngularJS中,在列表中显示按钮是一种常见的UI交互模式,通常用于列表项的编辑、删除或其他操作。这涉及到AngularJS的数据绑定、指令和控制器等核心概念。
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items">
{{item.name}}
<button ng-click="editItem(item)">编辑</button>
<button ng-click="deleteItem(item)">删除</button>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{id: 1, name: '项目1'},
{id: 2, name: '项目2'},
{id: 3, name: '项目3'}
];
$scope.editItem = function(item) {
console.log('编辑:', item);
// 编辑逻辑
};
$scope.deleteItem = function(item) {
console.log('删除:', item);
// 删除逻辑
};
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items track by $index">
<span ng-bind="item.name"></span>
<button ng-click="showActions($index)">操作</button>
<div ng-show="item.showActions">
<button ng-click="editItem(item)">编辑</button>
<button ng-click="deleteItem(item)">删除</button>
</div>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{id: 1, name: '项目1', showActions: false},
{id: 2, name: '项目2', showActions: false},
{id: 3, name: '项目3', showActions: false}
];
$scope.showActions = function(index) {
$scope.items[index].showActions = !$scope.items[index].showActions;
};
$scope.editItem = function(item) {
console.log('编辑:', item);
};
$scope.deleteItem = function(item) {
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
};
});
</script>
原因:
解决方案:
原因:
解决方案:
原因:
解决方案:
没有搜到相关的文章