4

I'm trying to update a model from a drop down menu using ng-options, and picking the already selected value using ng-selected. Here's a simplified example (and fiddle).

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="QuarterController">
    <select name="quarter" ng-model="Quarter.id" ng-options="q.id as q.val for q in Quarters">
      <option ng-selected="Quarter.val===q.val"></option>
    </select>
    <input type="button" name="Submit" value="Submit" ng-click="submit()"/>
    <br/>
    <p>{{answer}}</p>
  </div>
</div>

Angular

function QuarterController($scope) {
    $scope.Quarters = [{val: 'Q1', id: 1}, {val: 'Q2', id:2}, {val:'Q3', id:3}, {val:'Q4', id:4}];
    $scope.Quarter = {val: 'Q2', id: 2, extraField: 'Hello'};

    $scope.submit = function() {
        $scope.answer = "Val: " + $scope.Quarter.val + ", Id: " + $scope.Quarter.id + $scope.Quarter.extraField;
    };
}

So what's going on here is the drop-down options are the "val"s from $scope.Quarters, with the selected option's id being saved in $scope.Quarter.id. "submit" displays the id and val from $scope.Quarter. $scope.Quarter.id updates on submit, but not $scope.Quarter.val. Anybody know how to accomplish this?

EDIT

$scope.Quarter.extraField was added to better illustrate the problem I'm trying to solve. I need id and val to update, but I want extraField to stay the same.

tarrball
  • 2,123
  • 3
  • 23
  • 34

1 Answers1

2

You've got small error inn your select directive please see here

View:

Todo

  <div ng-controller="QuarterController">
    <select name="quarter" ng-model="Quarter" ng-options="q.val for q in Quarters">
        <option value="">{{Quarter.val}}</option>
    </select>
      <input type="button" name="Submit" value="Submit" ng-click="submit()"/>
      <br/>
      <p>{{answer}}</p>

  </div>
</div>

JS:

function QuarterController($scope) {
    $scope.Quarters = [{
        val: 'Q1',
        id: 1
    }, {
        val: 'Q2',
        id: 2
    }, {
        val: 'Q3',
        id: 3
    }, {
        val: 'Q4',
        id: 4
    }];
    $scope.Quarter = {
        val: 'Q2',
        id: 2
    };

    $scope.submit = function () {
        $scope.answer = "Val: " + $scope.Quarter.val + ", Id: " + $scope.Quarter.id;
    };
}
sylwester
  • 16,498
  • 1
  • 25
  • 33
  • Thanks, you answered the question I asked correctly. Now let me expand that to the question I now know I should have asked. I want this to update $scope.Quarter.val and $scope.Quarter.id, but I want $scope.Quarter.extraField to stay the same, no matter what is selected. Here's an updated fiddle (yours) http://jsfiddle.net/xpjaD/14/ , and http://jsfiddle.net/xpjaD/15/ (mine). Notice that the id updates and the extraField stays the same on mine. – tarrball Jun 12 '14 at 13:52
  • Hi Andy. I'm bit confused. Is this filddle jsfiddle.net/xpjaD/15 not what you want ? – sylwester Jun 12 '14 at 14:19
  • Almost. I want the id attribute to update (works), the extraField attribute to stay the same (works), and the val attribute to also update (doesn't work). – tarrball Jun 12 '14 at 15:56
  • Ok in this case you need to change a bit approach as 'extraFiles is not a part of $scope.Quarters model just add it to Quarter object on submit event please see here http://jsfiddle.net/xpjaD/17/ – sylwester Jun 12 '14 at 16:42