Initialise a select in AngularJs

Question

I have a select that should track a myCoef as a float value(not an object, but a float value).

I have the following code (CodePen HERE):

function theController($scope) {
  
  $scope.coefs = [
    {name:'mm', val:1/1000},
    {name:'cm', val:1/100},
    {name:'m', val:1}
  ];  

  $scope.myCoef = 1/100;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body ng-app>
   
  <div ng-controller="theController">
   
    <select ng-model="myCoef" 
            ng-options="coef.name for coef in coefs track by coef.val">
    </select>{{myCoef}}
  </div>
</body>

How do I correctly initialise my select, in order to keep a float value in myCoef?

I'would like to have myCoef as float value, not an object. — serge
– serge, Commented Apr 27, 2016 at 9:15

Walfrat · Accepted Answer · 2016-04-27 09:31:16Z

1

Use As syntax and remove track by.

PS : If someone knows why i have to remove track by he can edit my answer because i don't really know why.

function theController($scope) {
  
  $scope.coefs = [
    {name:'mm', val:1/1000},
    {name:'cm', val:1/100},
    {name:'m', val:1}
  ];  

  $scope.myCoef = 1/100;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body ng-app>
   
  <div ng-controller="theController">
   
    <select ng-model="myCoef" 
            ng-options="coef.val as coef.name for coef in coefs">
    </select>{{myCoef}}
  </div>
</body>

edited Apr 27, 2016 at 9:31

answered Apr 27, 2016 at 9:15

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

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

2 Comments

Walfrat Over a year ago

Strange.. i add to remove the track by to have it working... Check my edited answer

serge Over a year ago

super! I don't really understand this syntax, but seem to work! you can remove the incorect first edit now ;)

Community · Accepted Answer · 2017-05-23 11:52:36Z

A little strange syntax. Following the Walfrat answer, examples how to init by val, or by name the initial value (without passing via $scope.myCoef = $scope.coefs[1] syntax)

function theController($scope) {
  
  $scope.coefs = [
    {name:'mm', val:1/1000},
    {name:'cm', val:1/100},
    {name: 'm', val:1}
  ];  
  $scope.myCoefVal = 1/1000;
  $scope.myCoefName = 'cm';
}

<body ng-app>   
  <div ng-controller="theController">
   Init by value - myCoefVal=1/100 <br>
    <select ng-model="myCoefVal" 
            ng-options="coef.val as coef.name for coef in coefs">
    </select><br>
    now myCoefVal={{myCoefVal}}
    <br/><br/>
    Init by name - myCoefName='cm'<br>
    <select ng-model="myCoefName" 
            ng-options="coef.name as coef.name for coef in coefs">
    </select><br>
    now myCoefName='{{myCoefName}}'
  </div>
</body>

Collectives™ on Stack Overflow

Initialise a select in AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related