javascript - AngularJS - bug with ng-disabled? Not updating with new values - Stack Overflow

I'm somewhat new to angular and have e across a very weird problem, I'm sure others have too.

I'm somewhat new to angular and have e across a very weird problem, I'm sure others have too.

Let's say that this is the code for my button:

<button type="submit" ng-click="submit(something)" id="coolButton" 
        ng-disabled="type === 0 || code === ''" 
        >Check-In</button>

So, basically if either type is 0 or code is nothing (no text), then this button will be disabled.

Now's here where my problem starts: If I load the page with type = 0 and code = '', then sure enough it's disabled. If, I change both of these values then of course the button will be enabled.

However, if I change the values back to 0 and '', then the button won't bee disabled again. I know for a fact that the values are in fact 0 and '' as I've printed their values out on the page.

What could be causing ng-disabled to not run the expression again?

I'm somewhat new to angular and have e across a very weird problem, I'm sure others have too.

Let's say that this is the code for my button:

<button type="submit" ng-click="submit(something)" id="coolButton" 
        ng-disabled="type === 0 || code === ''" 
        >Check-In</button>

So, basically if either type is 0 or code is nothing (no text), then this button will be disabled.

Now's here where my problem starts: If I load the page with type = 0 and code = '', then sure enough it's disabled. If, I change both of these values then of course the button will be enabled.

However, if I change the values back to 0 and '', then the button won't bee disabled again. I know for a fact that the values are in fact 0 and '' as I've printed their values out on the page.

What could be causing ng-disabled to not run the expression again?

Share Improve this question edited Dec 18, 2015 at 8:11 Radim Köhler 124k48 gold badges242 silver badges340 bronze badges asked Jan 31, 2015 at 0:32 Daniel JamrozikDaniel Jamrozik 1,2382 gold badges11 silver badges25 bronze badges 6
  • also, I've put $scope.$apply() at the end of my controller callback, but that did not fix the issue. – Daniel Jamrozik Commented Jan 31, 2015 at 0:33
  • from angularjs docs about ng-disable We shouldn't do this, because it will make the button enabled on Chrome/Firefox but not on IE8 and older IEs – levi Commented Jan 31, 2015 at 0:34
  • is there an alternative to ng-disabled? And the functionality was the exact same on IE and Firefox when I tested it. This problem also exists with certain labels that have ng-hidem but I thought I'd focus on this first. – Daniel Jamrozik Commented Jan 31, 2015 at 0:37
  • ngDisabled is perfectly fine, @levi if you actually read the doc you will notice to not do disabled="{{expression}}", but ng-disabled is good. The same ment applys for ngSrc, ngClass, etc. @Daniel Jamrozik, this should work so please provide an actual code snippet or jsfiddle that reproduces the issue. – floribon Commented Jan 31, 2015 at 1:26
  • @DanielJamrozik you'd better share code on Plunker or jsfiddle then we can help debug. – Rebornix Commented Jan 31, 2015 at 1:51
 |  Show 1 more ment

1 Answer 1

Reset to default 4

I created working plunker here for you, to check that scenario described above is working:

<div ng-controller="HomeCtrl">

    <button type="submit" 
      ng-click="submit(something)" 
      id="coolButton" 
      ng-disabled="type === 0 || code === ''" 
      >Check-In</button><br />

    <div>type: <input ng-model="type" type="number" /></div>
    <div>code: <input ng-model="code" type="text"   /></div>

    <div>is type equal zero: {{type === 0 }}</div>
    <div>is type code empty: {{code === '' }}</div>

</div>

<script type="text/javascript"> 
var app = angular
.module('MyApp', [])
.controller('HomeCtrl', ['$scope', function ($scope) { 
  $scope.something = function(sth){alert(sth)};
  $scope.type = 0;
  $scope.code = "";
}])
</script>

Important parts here are inside of the controller, where we explicitly init the code and type. Otherwise both will start with undefined/null.

Check it here

Also, I would strongly suggest to change that style of $scope.type, $scope.code. It could bring some surprising behaviour sooner or later...

We should use some kind of Model cluster, which represents some reference which could be easily passed and does have a dot (see: https://stackoverflow./a/21882900/1679310)

// controller
$scope.Model = {
  type : 0,
  code : '', 
}

// directive ngDisabled in the view
ng-disabled="Model.type === 0 || Model.code === ''" 

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742317001a4421040.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信