单击表格时禁用按钮

时间:2016-06-05 08:22:11

标签: javascript angularjs html5

我想在点击时禁用按钮分配,因为它应该只分配一次所以我可以实现这一点,我在 HTML 中完成了以下代码:

<table class="table details">
<thead>
<tr>
<th sort-by="firstName">User Name</th>
<th sort-by="lastName">Description</th>
<th sort-by="Budget" sort-init="desc">Bid Amount</th>
<th sort-by="lastName">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="issue in issues | filter:filter">
<td><strong><a href="/ViewBid/Index?{{ issue.User_ID }}" />{{ issue.UserName }}           </strong></td>
<td><a href="/ViewBid/Index?{{ issue.User_ID }}" />{{ issue.Description }}</td>
<td><a href="/ViewBid/Index?{{ issue.User_ID }}" />{{issue.Bid_amt}}</td>
<td>
<div ng-controller="ExampleCtrl_Assign">
<div ng-show="AsgHide">
<button type="button" ng-click="AssignRecord(issue.ID,issue.Description,issue.Bid_amt)">Assign</button>
</div>
</div>
 <div ng-controller="ExampleCtrl_Delete">
<div ng-show="AsgHide" >
<button type="button" ng-click="DeleteRecord(issue.ID)">Delete</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>

JavaScript代码如下:

var app = angular.module('siTableExampleApp_Assign', []);
        app.controller('ExampleCtrl_Assign', ['$scope','$http', function ($scope, $http) {
        var user2 = window.localStorage.getItem('UserId');
        var Basic = window.localStorage.getItem('Basic');
        var Token = window.localStorage.getItem('Token');

        $scope.FunctionDisable = function (i) {
            $("#rbutton'+i+'").attr("disabled", "disabled");
        }

        $scope.AssignRecord = function (ID, Description, Bid_amt) {
            var BidID = ID;
            var date = new Date();  
            encodedString = {
                "ID": 1,
                "Travel_Info_ID": travel_info_id,
                "Bid_ID": parseInt(BidID),
                "Description": Description,
                "Bid_amt": Bid_amt,
                "Status": "InProcess",
                "User_ID": user2,
                "Entry_Date": date,
                "Update_Date": date
            }
            $http({
                method: 'POST',
                url: 'http://saisoftwaresolutions.com/v1/Assigned_Bids/Assigned_Bid/Create',
                data: encodedString,
                headers: {
                    'Authorization': 'Basic ' + Basic,
                    'Token': Token
                }
            })
            .success(function (data, status, headers, config) {
                console.log(headers());
                console.log(data);
                if (status === 200) {

                    //window.location.href = 'http://localhost:22135/BDetail/Index';

                } else {
                    $scope.errorMsg = "Login not correct";
                }
            })
            .error(function (data, status, headers, config) {
                $scope.errorMsg = 'Unable to submit form';
            })

2 个答案:

答案 0 :(得分:1)

使用始终可以使用Angular提供的ng-disabled指令来禁用html元素。

我根据您的要求制作了一个示例,并帮助它解决您的问题:

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items">{{item.User_ID}}: {{item.User_Name}}
          <button ng-click="handleClick($index)" ng-disabled="item.disabled">
          {{item.User_Name}}
          </button>
        </li>
    </ul>
</div>



function MyCtrl($scope) {
    $scope.items = [
    {
    User_ID: '10',
    disaled: false,
    User_Name: 'ABC'
  },    {
    User_ID: '11',
    disaled: false,
    User_Name: 'XYZ'
  }
 ];;

        $scope.handleClick = function(index){
        $scope.items[index].disabled = true;
      }
}

答案 1 :(得分:0)

Angular有一个针对此的指令:ng-disabled。

来自official documentation

  

该指令设置元素的disabled属性   ngDisabled中的表达式评估为真实。

因此,您可以将代码隐藏中的布尔值设置为true,并在按钮内进行评估。例如:

<button type="button" ng-disabled="issue.IsDisabled" ng-click="AssignRecord(issue.ID,issue.Description,issue.Bid_amt)">Assign</button>

另外,请查看其文档中的示例和此jsfiddle:https://jsfiddle.net/simpulton/q8r4e/