AngularJs appending options to select box

Question

I am new to AngularJs. I am having problem in appending options to select boxes created by javascript. Following is my code.

var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');

I am getting this error:- SyntaxError: invalid property id

Hi, I am posting json example. This is just a small part of json in my case.

    "ProjectOrder": {
"Connect direct required": {
  "value": "N",
  "id": "STR_15523_62"
},
"Cores": {
  "value": ".5",
  "id": "NUM_15523_50"
},
"Permanent data in GB": {
  "value": "100",
  "id": "NUM_15523_56"
},
"Description": {
  "value": "AZBNL azbngb",
  "id": "STR_15523_2"
},
"Order Id": {
  "value": "15523",
  "id": "INT_15523_96"
},
"Project cost center": {
  "value": "N",
  "id": "STR_15523_66"
},
"Project debitor": {
  "value": "N",
  "id": "STR_15523_64"
},
"Project OE": {
  "value": "N",
  "id": "STR_15523_57"
},
"Project SITE": {
  "value": "N",
  "id": "STR_15523_59"
},
"Project Status": {
  "value": "RFC",
  "id": "STR_15523_54",
  "dropdown": [
    {
      "value": "IW",
      "label": "In Work"
    },
    {
      "value": "RFC",
      "label": "Ready for Creation"
    },
    {
      "value": "CR",
      "label": "Created"
    },
    {
      "value": "FC",
      "label": "Failed"
    }
  ]
},
"Project Type (paas, miner)": {
  "value": "paas",
  "id": "STR_15523_37",
  "dropdown": [
    {
      "value": "paas",
      "label": "PaaS Project"
    },
    {
      "value": "miner",
      "label": "Miner Project"
    }
  ]
},
"WORK data in GB": {
  "value": "100",
  "id": "NUM_15523_55"
}

}

Now I have to create input fields and dropdown menus(if there is a dropdown menu) with json data

Answer 1

You really should not be hand-constructing HTML like that. It's best if you use a template and let the template engine handle the heavy lifting.

I also noticed that you're using object as the ng-model . Instead you should have a separate variable which will hold the selected value.

Here's a better way of doing this--in an .html file:

<div ng-repeat="object in listOfObjects"
    <label style="float: left">{{ $index }}</label>
    <select ng-model="selectedValues[$index]" class="form-control sel"
        style="width:300px; float:right; margin-right:75px;"
        ng-options="obj.value for obj in object"></select>
</div>

Then in whatever controller you have set up in JavaScript:

// this will be the list of selected values
$scope.selectedValues = new Array(list.length);
// this would be the array that each `object` is part of
$scope.listOfObjects = list;

This isn't the most elegant solution, but basically what I've done is construct an array that is the same length as the list of objects. Angular templates have a special variable $index when you're in an ng-repeat which tracks the current index of the array you're looping through.

So when a user changes the selected value of the 3rd select box (index 2), $scope.selectedValues[2] would be set to the selected option.

EDIT: on transforming the JSON to an array:

var list = Object.keys(json).map(function(jsonKey) {
    return {
        name: jsonKey,
        label: json[jsonKey].label,
        value: json[jsonKey].value
    };
});`

Answer 2

So.. there are a number of reasons why that won't work. The provided code wouldn't even work because of the template brackets that you are trying to append to your html string...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');

Is there a reason that you are trying build your markup in js?

It's also advised not to use jquery inside angular controllers. If you have jquery loaded the jQuery object is available through angular.element, otherwise angular uses jQuery light.

Rather than enumerate on the other issues here, I put together this basic example of how a select works in Angular

https://codepen.io/parallaxisjones/pen/BRKebV

Also, you should consult the angular documentation before posting questions to stack overflow. The docs provide a pretty clear example of how to use ng-repeat in a select. https://docs.angularjs.org/api/ng/directive/select

EDIT : I updated my codepen with an example of fetching JSON data with an HTTP GET request

EDIT : updated codepen with provided data example, iterating over object with (key, value) in json syntax in ng-repeat