CODEWITHSUNDEEP
javascriptangularjs
Priyanka Taneja
Priyanka Taneja

Reputation: 157

ng-change eventnot working on Dropdown

I am creating a dropdown having two options employee and customer if it is a user then a new text box should get open that is employee id and if it is a customer that textbox should hide. I am using Angular JS This is my HTML FILE.

Code for Drop down

<div class="row control-group">
    <label class="col-xs-4 col-sm-4 col-md-3 col-lg-3 control-label">{{::'label.identity'|translate}}</label>
    <div class="col-xs-7 col-sm-7 col-md-9 col-lg-9 controls">
        <select id="selectIdentity" name="selectIdentity">
            <!-- Empty option necessary for placeholder to work -->
          <option value="">{{::'define.selectval'|translate}}</option>
          <option ng-repeat="idprovider in identityProvider"                                        ui-select2="select2IdentityProvider" class="selectIdentity" ng-model="identityprovider" ng-change="changedValue(identityprovider)" ui-select2="select2LocaleSettings">{{idprovider}}</option>
        </select> 
        <span class="help-block" ng-show="addUserForm.selectIdentity.$error.required">{{::'error.required'|translate}}</span>
    </div>
</div>

Text Box code

        <div class="row control-group" ng-show="identityprovider == EMPLOYEE"
                        ng-class="{error:addUserForm.sso.$dirty && !addUserForm.sso.$valid , success:addUserForm.sso.$valid}">
                        <label class="col-xs-4 col-sm-4 col-md-3 col-lg-3 control-label">{{::'label.addUser.SSO'|translate}}</label>

                        <div class="col-xs-7 col-sm-7 col-md-9 col-lg-9 controls">
                            <input type="text" class="input-xlarge" id="sso" name="sso"
                                ng-model="addUser.user.sso" ng-pattern="ssoPattern"
                                placeholder="{{::'placeholder.addUser.sso'|translate}}"
                                ng-change="addUserForm.sso.$setValidity('duplicateName', true);"
                                required="true" ng-maxlength=8 ng-minlength=8 ge-auto-focus />

    <span class="help-block"
                                ng-show="addUserForm.sso.$dirty && addUserForm.sso.$error.required">{{::'error.required'|translate}}</span>
                                <span class="help-block"
                                ng-show="addUserForm.sso.$dirty && addUserForm.sso.$error.pattern">{{::'error.sso'|translate}}</span>



                             <span class="help-block"   
                                ng-show="addUserForm.sso.$dirty && addUserForm.sso.$error.maxlength">{{::'error.max.length'|translate}}</span>
                            <span class="help-block"
                                ng-show="addUserForm.sso.$dirty && addUserForm.sso.$error.duplicateName">{{::'error.editOrganization.duplicateName'|translate}}</span>
                        </div>
                    </div>

JS File Data

    $scope.identityProvider=['EMPLOYEE','Customer'];

       $scope.changedValue = function(item) {
                    alert("M into change");
                    $scope.itemList.push(item.name);
                  }

Upvotes: 2

Views: 130

Answers (2)

Ashish Rajput
Ashish Rajput

Reputation: 1529

Angular Select doc

The select directive is used together with ngModel to provide data-binding between the scope and the control (including setting default values).

So if you are playing with select, then ng-model is must for opertaions related to angular. So your select will be like :

<select id="selectIdentity" name="selectIdentity" ng-model="someModel" ng-change="ChangeAction(someModel)">

And on the controller side :

$scope.ChangeAction = function(data) {

}

Upvotes: 0

byteC0de
byteC0de

Reputation: 5273

add ng-change in select tag,

<select id="selectIdentity" name="selectIdentity" ng-change="changedValue(identityprovider)" ng-model="identityprovider" required>
</select>

Upvotes: 3

Related Questions