ng-repeat: populate drop down options with array

Question

I have a simple JavaScript object that looks like this:

$scope.obj = { "'Architect'": ["asdf","d","e","y"]};

I'd like to show the values of 'Architect' in a select box. However, the single quotes are throwing me off when trying to do the ng-repeat.

<select>
    <option ng-repeat="row in obj['Architect']" value="{{row}}">{{row}}</option>
</select>

That does not populate the select box, it just shows an empty select box. I assume it is interpreting the single quotes as a string literal, but even if I add single quotes and escape them, it still doesn't work as expected. Am I missing something?

Here is a sample plunker:

This might be a silly question as you might have a good reason for the quotes... but have you tried removing them? http://plnkr.co/edit/tOxov9wOVspXiQiF4P1W?p=preview — Michael Kang, Sep 03 '14 at 21:53
I'd like to remove them, but I work for a large company, and the data I get has quotes. I can't alter the data. — Josue Espinosa, Sep 03 '14 at 21:54

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

escape the quotes How to properly escape quotes inside html attributes?

<option ng-repeat="row in obj[&quot;'Architect'&quot;]" value="{{row}}">{{row}}</option>

http://plnkr.co/edit/6xUD3Zg0jxV05b41f2Gw?p=preview

edited May 23 '17 at 11:53

Community

1
1

answered Sep 03 '14 at 21:58

3

You could also use `` – Justin Niessner Sep 03 '14 at 22:02
1

" is the html entity for quotes. – Josue Espinosa Sep 03 '14 at 22:02
I'm actually surprised this works given that those should be decoded and then interpreted as two unescaped quotes by JS. Interesting. – Justin Niessner Sep 03 '14 at 22:04
yes but why is needed? Architect is in quotes it self. why is the second one need? – Emech Sep 03 '14 at 22:04
1

The single quotes are interpreted as a string literal, not as part of the string. – Josue Espinosa Sep 03 '14 at 22:05
awu i found. in the this is obj["'Architect'"] but I think this is odd too :D why don't you use obj["Architect"]? – Emech Sep 03 '14 at 22:08
If I used double quotes, it would terminate the `ng-repeat` attribute. – Josue Espinosa Sep 03 '14 at 22:09
no, i mean in definition $scope.obj = { "'Architect'": ["asdf","d","e","y"]}; why didn't you use $scope.obj = { "Architect" : ... }. why did you use the "'Architect'" instead of "Architect"? – Emech Sep 03 '14 at 22:11

score 1 · Answer 2 · answered Sep 03 '14 at 21:59

1

why don't you use "ng-options" for select? take a lock at this AngularJs API: select

answered Sep 03 '14 at 21:59

Emech

611
1
4
16

score 0 · Answer 3 · answered Jul 01 '18 at 18:27

Here is the complete code for ng repeat with external json

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>datatable using jquery.datatable in angularjs</title> 
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
      <link rel="stylesheet" href="css/style.css"> 
</head>
<body>
  <div class="container" ng-app="problemApp" data-ng-controller="validationCtrl">
  <select>
    <option ng-repeat="item in testdata" value="">{{item.name}}</option>
</select>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script  src="js/index.js"></script>
</body>
</html>

index.js

var app=angular.module('problemApp', []);
app.controller('validationCtrl',function($scope,$http){
    $http.get('http://localhost/Dtable_angular/ngrepeatdropdown/test.json').success(function (data) {

                $scope.testdata = data;
                console.log($scope.testdata)
        })


$scope.dataTableOpt = {
   //custom datatable options 
  // or load data through ajax call also
  "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
  };
});

test.json

[{
        "countryId": 1,
        "name": "France - Mainland",
        "desc": "some description"
    },
    {
        "countryId": 2,
        "name": "Gibraltar",
        "desc": "some description"
    },
    {
        "countryId": 3,
        "name": "Malta",
        "desc": "some description"
    }
]

ng-repeat: populate drop down options with array

3 Answers3

HTML

test.json