How to conditionally apply attribute in angularJS directive?

Question

In html:

<cms-text required="false" id="product_name" thename="product_name"></cms-text>

In cmsText.js

angular.module('cmsText',[]).directive('cmsText', function(){
'use strict';

    return {
        restrict: 'EA',
        scope: {
            thename:'=',
            required:'=',
            id:'='

        },
        replace:true,    
        templateUrl: 'cms-text/cmsText.html',
    };

});

In cmsText.html

<input id="id" class="form-control" name="thename" type="text" required>

I want the "required" word in input tag shows only when it is set to true and the word disappear when it is set to false. Anyone could help?

duplicate of http://stackoverflow.com/questions/13466133/how-can-i-conditionally-require-form-inputs-with-angularjs — frhd, Apr 23 '15 at 08:22

score 3 · Accepted Answer · answered Apr 23 '15 at 07:48

3

Use ngRequired to control the required attribute in Angular.

Update your template to

<input id="id" class="form-control" name="thename" type="text" ng-required="required">

answered Apr 23 '15 at 07:48

thomaux

19,133
10
76
103

score 1 · Answer 2 · answered Apr 23 '15 at 07:49

1

That would be adding the ng-required tag with a boolean value (angular input doc)

<input id="id" class="form-control" name="thename" type="text" ng-required="required">

answered Apr 23 '15 at 07:49

frhd

9,396
5
24
41

How to conditionally apply attribute in angularJS directive?

2 Answers2