How to show and hide the element attribute based on boolean value in angularjs?

Question

ctrl.js

In controller the value is true if user is landing on edit page

var self = this;
self.edit = "true"

html

On add page it should be

<md-input-container flex="25">
<label>GameId</label>
<input name="games" ng-model="ctrl.game" ng-required="true" ng-maxlength="50" custome-directive-to-check-unique-value >
</md-input-container>

On edit page it should be

<md-input-container flex="25">
<label>GameId</label>
<input name="games" ng-model="ctrl.game" ng-required="true" ng-maxlength="50" disabled>
</md-input-container>

For disable I can use ng-disabled=ctrl.edit to make input field disabled how, to do for directive custome-directive-to-check-unique-value

It is a boolean field and its working fine just need how to remove custom directive .. able to do the field disabled perfectly — Mr X
– Mr X, Commented Nov 26, 2015 at 11:22

Dean Meehan · Accepted Answer · 2015-11-26 11:20:38Z

2

You can simply use the attribute ng-show or ng-hide based on the value.

<div ng-hide="edit">Edit is False</div>

<div ng-show="edit">Edit is True</div>

If edit is true then the ng-show would be true showing the message Edit is True

answered Nov 26, 2015 at 11:20

Dean Meehan

2,66724 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr X Over a year ago

The field has to be there can't hide .. however on submit validation it is not allowing to submit. so only option is to remove that validation on edit condition

Dean Meehan Over a year ago

Your question How to show and hide the element attribute based on boolean value in angularjs? has been answered. I'm not sure what else you are asking specificity?

Dean Meehan Over a year ago

Not place the custom directive on both edited and add page, the custom directive can then check if the field is disabled, then don't run it's code

Himanshu Mittal · Accepted Answer · 2015-11-26 11:22:29Z

1

You can use two input fields and use ng-if to show one of the fields based on a bool value which specify whether it is add view or edit view.

<input ng-if="!ctrl.edit" name="games" ng-model="ctrl.game" ng-required="true" ng-maxlength="50" custome-directive-to-check-unique-value  >
<input ng-if="ctrl.edit" name="games" ng-model="ctrl.game" ng-required="true" ng-maxlength="50" disabled>

answered Nov 26, 2015 at 11:22

Himanshu Mittal

8047 silver badges19 bronze badges

Comments

Theo Itzaris · Accepted Answer · 2015-11-27 07:10:22Z

you can use ng-disabled directive to disable or enable your input text, but as i see you have done this already.
1. As for the directive disable, why dont you use an if statement inside your directive body and check what you need to do according to your ctrl.edit value.

to do this just pass the ctrl.edit from your input text to your directive like this:

html

<input name="games" ng-model="ctrl.game" ng-required="true" ng-maxlength="50" custome-directive-to-check-unique-value   myFlag = "ctrl.edit">

directive

.directive('customeDirectiveToCheckUniqueValue', function () {
            return {
                restrict: 'AE',
                scope:{
                   myFlag :'='
                 },
                link: function (scope, element, attrs) {
                    //here make your condition and add your code accordingly
                    if(myFlag){
                       //if true your code
                    }else{
                       //if false your code
                     }
                }
            };
        })

hope helps,good luck.

Collectives™ on Stack Overflow

How to show and hide the element attribute based on boolean value in angularjs?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related