Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Binding options in selectbox at runtime using Angular js with Demo

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 118
    Comment on it

    Hello Readers,
    We will add value of input text field in options of select box on blur event. Whatever we type in input text field it will added to the options of select box on blur event.
     

     To understand the full functionality here is the full example :

     

    index.html

    <ion-view>
        <ion-content>
            <div class="row">
                <div class="col col-60">
                    <select name="link_type" ng-model="selectedItem" 
                                  ng-options="item.value for item in options">
                        <option value="">-- choose --</option>
                    </select>
                    <input type="text" name="format"
                                 placeholder="type here" 
                                 ng-blur="inputBlur(inputValue)" 
                                 ng-model="inputValue" id="textFieldVal"/>
                    <p>Selected item is : {{selectedItem.value}}</p>
                </div>
            </div>
        </ion-content>
    </ion-view>

    In the above code we are using ng-options directive which is adding the values into options and a input text field with ng-blur directive.

     

    controller.js

    $scope.options = [];
    $scope.inputBlur = function (e) {
       $scope.inputVal = e;
       $scope.options.push({id:$scope.inputVal,value:$scope.inputVal});
       $("#textFieldVal").val('');
    }

    When we click anywhere on the page the value will add into the options of selectbox. The above code explain the whole functionality.

     

    Hope this will help you:)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: