All geek questions in one place

Select a dropdown that is not originally tied to the AngularJS model

Ok, so my problem is that I have a simple fetch, and I use ng-repeat to populate the drop down list, like below:

<select ng-model="tstCtrl.model.value" required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

After selecting the option, binding to model.value works fine, but until then it does not seem to bind the selected dropdown option to the value of model.value is initially set.

This is shown below:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function(){
      
      this.model = {
        value:3
      };
      
      this.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController as tstCtrl">

    {{tstCtrl.model.value}}

    <select ng-model="tstCtrl.model.value" required>
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
    </select>

  </body>



</html>
Run code

I think the above snippet makes it really clear, but I am happy to answer any questions.

How to solve this?

thanks

+4
source share
4 answers

ng-repeat, :

    <select ng-model="tstCtrl.model.value">
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}" 
              ng-selected="tstCtrl.model.value==option.a">
                   {{option.b}}
       </option>
    </select>

, ng-options.

+2

ng-options ng-repeat . b, a, :

<select ng-model="model.value" ng-options="option.a as option.b for option in myOptions" required>      
</select>

:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function($scope){
      
      $scope.model = {
        value:3
      };
      
      $scope.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController">

    {{model.value}}

    <select ng-model="model.value" ng-options="option.a as option.b for option in myOptions"  required>      
    </select>

  </body>



</html>
+4

AngularJS 1.3.x 1.4, ng-model . , Angular , :

app.directive('convertToNumber', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {                
            ngModel.$parsers.push(function(val) {                    
                return parseInt(val, 10);
            });
            ngModel.$formatters.push(function (val) {                    
                return '' + val;
            });
        }
    };
});

"":

<select ng-model="tstCtrl.model.value" convert-to-number required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

Here is the link URL where the specified solution came from:

http://weblog.west-wind.com/posts/2015/May/21/Angular-Select-List-Value-not-binding-with-Static-Values

+2
source

Just need ng-options instead of ng-repeat, like this:

ng-options="option.a as option.b for option in myOptions"
0
source

Source: https://habr.com/ru/post/1609676/

More articles:


All Articles