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?
- 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}}"
, butng-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
1 Answer
Reset to default 4I 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条)