CODEWITHSUNDEEP
angularjs
awwester
awwester

Reputation: 10172

Angular model and select not working

I've been having an issue for a day or two trying to get a select element working with my angular model.

I have a driving log, and one of the fields is truck. The value should be the truck id, which is received and sent from/to an API.

I've tried a couple methods, using ng-repeat to generate options, as well as using ng-options. The problem I ran into with the ng-repeat method was that I wasn't able to set the selected item, even with a lot of tinkering and doing things that shouldn't have to be done, and bad practice.

The second method I believe is the correct one, and it's using ng-options.

<select ng-model="timeLog.truck" convert-to-number
  ng-options="truck.description for truck in trucks track by truck.id">
  <option value="">Choose Truck</option>
</select>

.controller('EditTimeLogCtrl', function($scope, $stateParams, $location, timeLog, LogEntry, localStorageService) {
  // edit an individual time log
  $scope.timeLog = timeLog;
  $scope.trucks = localStorageService.get('trucks');

  $scope.saveTimeLog = function() {
    LogEntry.update($scope.timeLog, function(data) {
      $location.path('/tab/logs/edit');
    });
  }
})

Everything else in my timeLog model works, and the value in the model is an integer.

For some reason, I can't get the initial value to set correctly even though the docs specify to use this to set a default value.

The other issue I have when using ng-options is that when I submit the form, it uses the truck object {"description": "big red", "id": 7, ... } instead of the value of the option, which would just be 7. The API is expecting the id, so that does not work.

I've found 3 stackoverflow articles about that, and they all give various answers which don't really solve the problem.

This seems like a very common use case, maybe I'm thinking about it the wrong way? I just have a model which has a dropdown/select field and I need that to populate to what the selected value is if the model already exists (i.e. edit form), and pass the id value in the model save.

Upvotes: 0

Views: 94

Answers (2)

Henry Zou
Henry Zou

Reputation: 1917

Make sure your timeLog.truck IS (===) the actual object in the trucks array (same referenced object)

angular
  .module('app', [])
  .controller('myController', myController);

function myController($scope) {

  $scope.trucks = [{
    "description": "big red",
    "id": 7
  }, {
    "description": "big yellow",
    "id": 6
  }];

  $scope.timeLog = {truck: $scope.trucks[0]};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myController">
    <select ng-model="timeLog.truck" ng-options="truck.description for truck in trucks">
      <option value="">Choose Truck</option>
    </select>
  </div>
</div>

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

Your ngOptions syntax is a bit off - it's value as text for obj in arr - so change yours to:

ng-options="truck.id as truck.description for truck in trucks track by truck.id"

And then set your model to the id of the object you want selected:

$scope.timeLog.truck = 7; //truck id 7 selected.

If you want the whole object as the value:

ng-options="truck as truck.description for truck in trucks track by truck.id"

And set the whole object:

$scope.timeLog.truck = $scope.trucks[0];

Upvotes: 1

Related Questions