Angularjs populate the select and checkbox from JSON not working

Question

I'm trying to populate the form with Data that are coming from Database/JSON.

I can populate the text field but for some reason the select drop down and the checkbox are not being populated with data. The select should have "male" and the checkbox should be ticked because it's set true.

code:

    <form>
    <label>Gender:</label>
    <select id="s1" ng-model="myData.gender"></select>
    <br>
    <label>Name:</label>
    <input type="text" ng-model="myData.name">
    <br>
    <label>Active:</label>
    <input type="checkbox" ng-model="myData.active" value="" id="checkbox" name="check" ng-init="myData.active=myData.active"><br>
    <input type="button" value="Save" ng-click="Update">
  </form>

    //assume these data coming from database
      $scope.myData = {
        "name" :  "John",
        "active" : "true",
        "gender" : "male"
      };

So basically the whole idea is that, when the fields are populated, the user can change the values and then hit the Save button which will update the database with new data.

Can anyone help?

PLUNR

Saqueib · Accepted Answer · 2015-02-02 10:25:45Z

2

You need to make some changes in template

<label>Gender:</label>
<select 
  id="s1" 
  ng-model="myData.gender" 
  ng-options="sex for sex in ['male', 'female']">
</select>

<br>
<label>Name:</label>
<input 
  type="text" 
  ng-model="myData.name">

<br>
<label>Active:</label>
<input 
 type="checkbox"  
 ng-model="myData.active"  
 id="checkbox" 
 name="check" >

<br>
<input type="button" value="Save" ng-click="Update">

and in data

//assume these datra coming from database
$scope.myData = {
    "name" :  "John",
    "active" : true,  // it will be true not string "true"
    "gender" : "female"
  };

here is working pluck

If data from db is not valid Boolean use Transformer to make data valid for js. in short cast the int, and boolean from db.

edited Feb 2, 2015 at 10:25

answered Feb 2, 2015 at 10:19

Saqueib

3,5184 gold badges36 silver badges58 bronze badges

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

Comments

rmuller · Accepted Answer · 2015-02-02 10:20:45Z

1

For starters, your true value is a string and not a boolean (use true instead of "true"), so that's why the checkbox is not working.

$scope.myData = { "name" : "John", "active" : "true", "gender" : "male" };

$scope.myData = { "name" : "John", "active" : true, "gender" : "male" };

Secondly your select does not have any options, so you should add the following to your HTML.

<option value="male">Male</option>
<option value="female">Female</option>

Or use ng-options.

Plunkr

answered Feb 2, 2015 at 10:20

rmuller

1,83712 silver badges12 bronze badges

Comments

squiroid · Accepted Answer · 2015-02-02 10:24:13Z

1

First of all you should go for a good tutorial :-

You cannot bind select directly with ng-model it's not valid.

Now instead of simple myData as a object you need to create a array because ng-options can only work with array.

$scope.myData = [{
    "name" :  "John",
    "active" : "true",
    "gender" : "male"
  }];

In HTML:

 <select id="s1" ng-model="selected" ng-options="item.gender for item in myData">
    </select>

Here is plunker

answered Feb 2, 2015 at 10:24

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Comments

Kangcor · Accepted Answer · 2015-02-02 10:24:27Z

1

Also you can add the 'ng-checked' directive to the input checkbox (see this)

<input type="checkbox" ng-checked="myData.active" ng-model="myData.active" value="" id="checkbox" name="check" ng-init="myData.active=myData.active">

answered Feb 2, 2015 at 10:24

Kangcor

1,1991 gold badge16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angularjs populate the select and checkbox from JSON not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related