问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

angular ng-repeat好多按钮，怎么点击对应按钮让其禁用

头像
Zero
    10822836
     <tr ng-repeat="n in listData">
    <td>{{$index+1}}</td>
    <td>{{n.name}}</td>
    <td><button type="button" class="btn btn-info btn-sm" ng-disabled="flag"  ng-click="chose(n.id,n.name,$index)">选择</button></td>
</tr>

$scope.flag=false;
$scope.chose=function (ids,name,index) {
    $scope.flag=true;
};

    clipboard.png

    我这样子写只要触发一次点击事件，列表的所有按钮都禁用了，可是想要的效果是点击哪个禁用哪个，点击过的一直处于禁用状态，除非操作删除，对应的按钮才可以重新点击求解~

    angularjs
    阅读 4.5k
    4 个回答
    得票最新
    头像
    NsNe
      1.7k1218
      ✓ 已被采纳

      不说废话，直接上代码

      <!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="AppController">
<table>
    <tr ng-repeat="n in listData">
        <td>{{$index+1}}</td>
        <td>{{n.name}}</td>
        <td><button type="button" class="btn btn-info btn-sm" ng-disabled="flag[n.id]" ng-click="chose(n, $index)">选择</button></td>
    </tr>

</table>


<br/>
<div>result:</div>
<table>
    <tr ng-repeat="n in selected">
        <td>{{n.name}}</td>
        <td><button type="button" class="btn btn-info btn-sm" ng-click="delete(n, $index)">删除</button></td>
    </tr>
</table>

    <script type="text/javascript">
    angular.module('app', []);

    angular.module('app').controller('AppController', AppController);

    AppController.$inject = ['$scope'];

    function AppController($scope) {
        $scope.listData = [{
            id: 1,
            name: '1'
        }, {
            id: 2,
            name: '2'
        }];

        $scope.flag = {};
        $scope.selected = [];

        $scope.chose = function (item,index) {
            $scope.flag[item.id] = true;//以每一个id为key，存储禁用状态
            $scope.selected.push(item); //选择的结果
        };

        $scope.delete = function(item) {
            var index = $scope.selected.indexOf(item);
            index >= 0 && $scope.selected.splice(index, 1);   //从结果中删除
            $scope.flag[item.id] = false;     //重置禁用状态
        } 
    }

    </script>
</body>

</html>

      可以发现flag和selected之间有重合的地方，即将选中禁用，未选中的不禁用，那么还可以：

      <!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="AppController">
<table>
    <tr ng-repeat="n in listData">
        <td>{{$index+1}}</td>
        <td>{{n.name}}</td>
        <td><button type="button" class="btn btn-info btn-sm" ng-disabled="selected.indexOf(n) >= 0" ng-click="chose(n, $index)">选择</button></td>
    </tr>

</table>


<br/>
<div>result:</div>
<table>
    <tr ng-repeat="n in selected">
        <td>{{n.name}}</td>
        <td><button type="button" class="btn btn-info btn-sm" ng-click="delete(n, $index)">删除</button></td>
    </tr>
</table>

    <script type="text/javascript">
    angular.module('app', []);

    angular.module('app').controller('AppController', AppController);

    AppController.$inject = ['$scope'];

    function AppController($scope) {
        $scope.listData = [{
            id: 1,
            name: '1'
        }, {
            id: 2,
            name: '2'
        }];

        $scope.selected = [];

        $scope.chose = function (item,index) {
            $scope.selected.push(item);
        };

        $scope.delete = function(item) {
            var index = $scope.selected.indexOf(item);
            index >= 0 && $scope.selected.splice(index, 1);
        }
    }

    </script>
</body>

</html>
      头像
      kiven
        33211

        添加一个判断，按钮禁用的状态是选中当前的id值，n.id=choose的时候再触发；
        html:

        <tr ng-repeat="item in user" >
                <td class="footable-visible">{{item.id}}</td>
                <td class="footable-visible">{{item.name}}</td>
                <td>
                    <button id="{{item.id}}" type="button" class="btn btn-info btn-sm"  ng-click="chose(item.id,item.name)">选择</button>
                </td>
            </tr>

        js:

        $scope.chose=function (ids,name) {
        $('#'+ids).attr("disabled","true");
    };
        头像
        littlelyon
          7.9k3927

          flag不应该作为一个全局的状态声明的，应该是作为listData的内部的每一个元素的状态属性出现的，绑定的时候使用n.flag绑定，这样每一个元素的点击状态就独立了。

          头像
          G_Koala_C
            5.1k645133

            ng-disabled="n.flag"
            这么写。开始的时候，n对象中是没有flag，所以按钮是正常状态。
            在ng-click="chose(n)"中，直接把n传过去，在controller中判断逻辑就行了。controller中加一句，
            n.flag = true; 这样按钮就可以禁用了。当然你也可以加其他逻辑让按钮启用。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题