How to Select box value selected from db values in angular js like selected in php?

Question

Am newbie to angular js please give me the solution.

How to selected Db values selected in select dropdown list like PHP in angular js?

For example Php coding,

$array = array("apple", "orange", "lemon");
<select>
<option value=""></option>
<?php
foreach ($array as $data) {
    ?>
    <option value="<?php echo $data ?>" <?php if ($data == "orange") echo "selected"; ?>><?php echo $data ?></option>
<?php } ?>

So in PHP we selected value means to give echo selected How to do like in angular js?

My Angular Js code:

<select multiple="multiple" id="citizenship3" name="citizenship3" ng-model="attributes.citizenship"  class="example-getting-started form-control"  required>                       
    <option ng-repeat="clist in citizenshipList" value="{{clist.country}}" ng-selected="{{ attributes.citizenship.Selected == true }}">{{clist.country}}</option>
</select>

Its fetch all value from DB and also fetching stored db value it's working fine but it's not selected value from DB value How to do Selected in angular js like above PHP coding?Am using ng-selected but it's not working?

My Drop down Design.

Icycool · Accepted Answer · 2016-07-06 08:59:12Z

2

You can "pre-select" your select by setting correct ng-model, as simple as that!

Note that by default the values you code in <option> are in string format, it won't work if you use number.

Do consider using ng-options for more control of data in ng-model.

angular.module('test', []).controller('Test', function($scope){
  $scope.selected = ["2", "3"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="test" ng-controller="Test">
  <select multiple ng-model="selected">
    <option value="1" ng-selected="selected.indexOf('1') != -1">one</option>
    <option value="2" ng-selected="selected.indexOf('2') != -1">two</option>
    <option value="3" ng-selected="selected.indexOf('3') != -1">three</option>
    <option value="4" ng-selected="selected.indexOf('4') != -1">four</option>
  </select>
  
  {{selected}}
</div>

Edit:

Not sure how is your drop down design working, maybe it is detecting the selected attribute and some JS manipulation to update the attribute on user click.

I've updated the script so it populates selected when user is changing the options, not sure if it would work though.

You'll need to provide the plugin you use so I can look into it further.

edited Jul 6, 2016 at 8:59

answered Jul 6, 2016 at 7:47

Icycool

7,1991 gold badge27 silver badges33 bronze badges

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

6 Comments

Account Test Over a year ago

Thanx for your response,plz check Dropdown image in my question,Normal select box it's working fine,But in my above dropdowm design not working

Icycool Over a year ago

@AccountTest udated answer

Account Test Over a year ago

<li class="ng-binding ng-scope active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Afghanistan"> Afghanistan</label></a></li> select box selected my design like.how to change active?

Account Test Over a year ago

Using bootstrap_multiselect .js.please give me solution

Icycool Over a year ago

You can use angular bootstrap multiselect in this case.

|

user6302777 · Accepted Answer · 2016-07-06 07:57:25Z

0

In your controller. Make a http request which will return the encoded json. Put the return value in a scope then repeat the object using ng-option.

answered Jul 6, 2016 at 7:57

user6302777

1 Comment

Account Test Over a year ago

thanx for your response,normal dropdown it's working fine,but in my dropdown design it's not working check my above image

Collectives™ on Stack Overflow

How to Select box value selected from db values in angular js like selected in php?

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related