Angularjs Select Option set to first item did not work

Question

I am working with angular and semantic ui. I am trying to make a selection of Y and N through a select option. Basically i just want the first item was selected when the page show up. Tried many ways but i couldn't make it works.

Please take a look at this plunker.

angular.module('myapp', [])

.controller('testctrl', function ($scope){
  $scope.add = {};
  $scope.Consigns = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
  $scope.add.consign = $scope.Consigns[0].label;
})

.controller('testctrl1', function ($scope){
  $scope.add = {};
  $scope.Consigns1 = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
  $scope.add.consign1 = $scope.Consigns1[0].label;
});

https://plnkr.co/edit/cHcLd14xKFxLMS4uy0BM?p=preview

you should init your add.consign when with the complete object not just the by the label — Erez
– Erez, Commented May 16, 2016 at 10:26
@Erez what you mean by complete object? please see the update plnker — Joseph
– Joseph, Commented May 17, 2016 at 2:05

Sajal · Accepted Answer · 2016-05-16 10:35:40Z

1

Print the model value in default placeholder. Rather than sending the label value in $scope.add.consign you could send the whole object and print whats required.

Working plunker: https://plnkr.co/edit/XeuiS7p3K1OOx5nHL9c5?p=preview

answered May 16, 2016 at 10:35

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

Comments

3 revs · Accepted Answer · 2016-05-16 11:01:20Z

0

javascript:

 $scope.ListOrder =
        [
            { Name: "price", Id: 1 },
            { Name: "exist", Id: 2 },
            { Name: "Sale", Id: 3 },
            { Name: "New", Id: 4 }
        ];
 $scope.Order = { Name: "exist", Id: 1 };

HTML:

 <select ng-model="Order" ng-options="obj.Name for obj in ListOrder"></select>

edited May 16, 2016 at 11:01

community wiki

3 revs
mehrdad

Comments

Hadi · Accepted Answer · 2016-05-16 11:06:55Z

0

Remove

 <script>
   $('.ui.dropdown').dropdown();
</script>

and also change select tag to this

 <select ng-model="add.consign" class="ui fluid dropdown" ng-options="x.label as x.label for x in Consigns">
          <option value=""></option>
 </select>

edited May 16, 2016 at 11:06

answered May 16, 2016 at 10:51

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

1 Comment

Joseph Over a year ago

removing the script tag will remove some style of the dropdown which i wish to be kept, although it works in your ways

Collectives™ on Stack Overflow

Angularjs Select Option set to first item did not work

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related