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:
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:
Share Improve this question edited Sep 3, 2014 at 21:59 Josue Espinosa asked Sep 3, 2014 at 21:47 Josue EspinosaJosue Espinosa 5,08916 gold badges50 silver badges83 bronze badges 2- This might be a silly question as you might have a good reason for the quotes... but have you tried removing them? plnkr.co/edit/tOxov9wOVspXiQiF4P1W?p=preview – Michael Kang Commented Sep 3, 2014 at 21:53
- 1 I'd like to remove them, but I work for a large pany, and the data I get has quotes. I can't alter the data. – Josue Espinosa Commented Sep 3, 2014 at 21:54
3 Answers
Reset to default 6escape the quotes How to properly escape quotes inside html attributes?
<option ng-repeat="row in obj["'Architect'"]" value="{{row}}">{{row}}</option>
http://plnkr.co/edit/6xUD3Zg0jxV05b41f2Gw?p=preview
why don't you use "ng-options" for select? take a lock at this AngularJs API: select
Here is the plete 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./bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables/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./jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare./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"
}
]