Отключено Кнопка когда она щелчок в таблице

Question

Я хочу, чтобы отключить кнопку Назначить, когда она нажата, bacause он должен назначить только один раз, так что я могу добиться этого, я сделал следующий код в 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'; 
      }) 

Answer 1

Угловое имеет директиву только для этого: ng-disabled.

от их official documentation:

Эта директива устанавливает отключенный атрибут элемента, если выражение внутри ngDisabled вычисляется в truthy.

Таким образом, вы можете установить логическое значение в своем кодовом замке в 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/.

Answer 2

Использование всегда может использовать директиву ng-disabled, предоставляемую функцией Angular to 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; 
     } 
}