Properly handle Select with angular

Question

I am new to angular. I have the select declared as such (jade syntax)

select(ng-model="projectData.ProjectStatus" ng-options="c.name for c in statuses")

and statuses are initialised as

$scope.statuses = [
  {name:'Active', value:1},
  {name:'Not active', value: 0}
];

In resulting select, nothing is selected and it is rendered as

<select
  ng-model="projectData.ProjectStatus"
  ng-options="c.name for c in statuses"
  class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">Active</option>
    <option value="1">Not active</option>
</select>

How I can specify which option I need to have selected, and how to avoid rendering of first option with "?" so I simply have a select where "Not active" or "active" is already chosen?

Note that $scope.projectData.ProjectStatus IS sent to 1 but it does not seem to be in effect here...

Maybe I think create currentSelection variable on $scope and use it. — Ozan ÇAKİN
– Ozan ÇAKİN, Commented Feb 17, 2014 at 14:07

Ajay Singh Beniwal · Accepted Answer · 2014-02-17 14:09:53Z

1

You should not manually use options tag instead try the below code to make it working

<body ng-controller="MainCtrl" >
 <div>
   <select ng-model="projectData.ProjectStatus" ng-options="c.value as c.name for c in data"></select>
</div>
    <script>
        var app = angular.module('demo', []);
        alert(app);

        app.controller('MainCtrl', function ($scope) {
            $scope.data = [{ name: 'Active', value: 1 }, { name: 'Not active', value: 0 }];
            $scope.projectData = { ProjectStatus: 0 }
        });

    </script>
</body>

</html>

answered Feb 17, 2014 at 14:09

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

Comments

servik · Accepted Answer · 2014-02-17 14:10:04Z

0

You can set default value for select by setting model value in your controller:

$scope.projectData.ProjectStatus = $scope.statuses[0];

Also, note that option values rendered in html are actually indexes of array you pass in ng-options. More info in API Doc.

answered Feb 17, 2014 at 14:10

servik

3,1114 gold badges31 silver badges37 bronze badges

Collectives™ on Stack Overflow

Properly handle Select with angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related