sac Dahal sac Dahal - 5 months ago 23
AngularJS Question

enable/disable button on a table on selection of dropdown using ng-options not working properly

I have a table with a dropdown selection in each row, I wanted to make an upload button (to work) only when the the drop down status is done. Right now its not working properly
fiddle here

<body ng-app='saapp', ng-controller = "homeCtrl">
<body>
<table>
<tr data-ng-repeat="test in tests ">
<td>{{$index+1}}</td>
<td>{{test}}</td>
<td style="color:red"> pending</td>
<td><font size="2" color="red"></font>
<select ng-model="checkStatus" ng-init="checkStatus='NotDone'", ng-options="status.sta as status.name for status in status" ng-change="changePayStatus(checkStatus)"></select>
</td>
<td class="col-md-2">
<P>
<button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true" ng-disabled="enableUpload" class="btn-primary btn-u-xs">Upload </button>
<div ng-show="pictureEditor">
<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<div ng-show="pictureEditor" class="input-group"><span class="input-group-btn">

<button ng-click="saveDiagnosticReport(test, appointmentDetails); pictureEditor = false " class="btn btn-default">Save &nbsp;<i class="input-save fa fa-check-square"></i></button>
<button ng-click="pictureEditor = false" class="btn btn-default">Back &nbsp;<i class="fa fa-undo"></i></button></span></div>
</div>
</P>
</td>
</tr>
<table>
</body>


angular controller

var app = angular.module('saapp',[ ]);
app.controller('homeCtrl', function($scope){
$scope.tests = ["A", "B", "C"]
$scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
$scope.enableUpload = 1;
$scope.changePayStatus = function(status) {
console.log(status);
if(status == '1') {
$scope.enableUpload = 0;
}
else if(status == "0") {
$scope.enableUpload = 1;

}
};
})

hsh hsh
Answer

You need to bind each row's upload button's disablity state to different model inside $scope, one way for doing that is to hold each row disablity state in it self,so you need to change tests array to an object like this:

$scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}] 

disabled now holds the state of upload button disability for each row. by changing tests this way, you'll need to change your code like bellow to achieve what you are looking for:

<table>
  <tr data-ng-repeat="test in tests ">
    <td>{{$index+1}}</td>
    <td>{{test.name}}</td>
    <td style="color:red"> pending</td>
    <td><font size="2" color="red"></font>
       <select ng-model="checkStatus" ng-init="checkStatus='NotDone'", ng-options="status.sta as status.name for status in status" ng-change="changePayStatus(checkStatus,test)"></select>
    </td>
    <td class="col-md-2">
      <p>
           <button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true"
            ng-disabled="test.disabled" class="btn-primary btn-u-xs">Upload </button>
         ...
      </p>
    </td>
  </tr>
<table>

you also need to change controller like this:

app.controller('homeCtrl', function($scope){
     $scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}] 
     $scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
     $scope.changePayStatus = function(status,testItem) {
         console.log(status);
         if(status == 1) {
            testItem.disabled= 0;
         }
         else if(status == 0) {
            testItem.disabled= 1;

         }
     };
});

An edited working sample can be found Here

hope that helps.