A plunker would help illuminate the issue.  It looks like you are trying to 
mix jQuery with angular which is not a good idea inside the controller. 
 Also, the way you think has to change with angular since it's a 
declarative language.

Here's a plunk I wrote to demo an 
approach: http://plnkr.co/edit/1xfYEnJSOSOCovJTlAVQ?p=preview

Tips:
- personally I use bootstrap and do not have to provide a class of disabled
- don't try to pass in a value on your ng-change function since when it 
fires the ng-model variable will already be updated to the selected value
- don't use a $watch on ng-model since ng-change can fire only when it's 
needed ($watch is not optimal and will fire on initial load which is why 
you see the undefined, undefined)
- there's a "dot rule" about ng-model such that it should always affect an 
object reference... meaning ng-model="something.yourvariable" and never 
just ng-model="yourvariable"
- you can't specify two default options with ng-options, don't try to set 
selected="selected" your self.
- keep it simple, then build up to complexity as you understand the basic 
concepts



On Wednesday, April 16, 2014 9:24:29 AM UTC-6, Reynier Pérez wrote:
>
> I need to toggle a button state between enabled/disabled if I change the 
> default value of a select element. Take this HTML as example:
>
>     <select 
>         ng-change="statusBtn(btnUpdFee, updFee)" 
>         ng-options="wt.id as wt.name for wt in wtax" 
>         ng-model="updFee" 
>         class="ng-pristine ng-valid"
>     >
>         <option value="0" selected="selected">cm-534be5d66aea3</option>
>         <option value="1" selected="selected">cm-534be5d681a02</option>
>         <option value="2">cm-534be5d68316e</option>
>     </select>
>
>     <button disabled="" ng-click="showCommentModal('updateFee')" 
> class="btn btn-success" id="btnUpdFee"><i class="icon-ok"></i></button>
>
> And this is the code I wrote but it's not working:
>
>     $scope.statusBtn = function(btnId, curValue) {
>         if (curValue != $scope.updFee) {
>             $("#" + btnId).removeAttr("disabled");
>         } else {
>             $("#" + btnId).attr("disabled");
>         }
>     }
>
> This approach doesn't work
>
> I made some changes and now code look like this:
>
>     <button class="btn btn-success" 
> ng-click="showCommentModal('updateFee')" ng-disabled="!btnStatus"><i 
> class="icon-ok"></i></button>
>
>     $scope.$watch("updFee", function(newValue, oldValue) {
>         if (newValue === oldValue) {
>             $scope.btnStatus = false;
>         } else {
>             $scope.btnStatus = true;
>         }
>
>         console.log($scope.btnStatus, newValue, oldValue);
>     });
>
> And this is the output:
>
>     First Page Load (no changes): false undefined undefined
>     First Page Load (no changes): true 2 undefined
>     Changing SELECT: true 1 2
>     Changing SELECT again: true 3 1
>
> But still not working, what I'm doing wrong?
>

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to