ng-repeat: llenar opciones desplegables con matriz

Question

Tengo un objeto JavaScript simple que se ve así:

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

Me gustaría mostrar los valores de 'Architect' en un cuadro de selección. Sin embargo, las comillas simples me están desanimando cuando intento hacer el ng-repeat.

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

Eso no llena el cuadro de selección, solo muestra un cuadro de selección vacío. Supongo que está interpretando las comillas simples como un literal de cadena, pero incluso si agrego comillas simples y escapo de ellas, todavía no funciona como se esperaba. ¿Me estoy perdiendo de algo?

Aquí hay un ejemplo de plunker:

javascript angularjs angularjs-ng-repeat ng-repeat

5

Josue Espinosa 4 sep. 2014 a las 01:47

Answer 1

Escapar de las comillas ¿Cómo escapar de comillas correctamente dentro de los atributos html?

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

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

6

Community 23 may. 2017 a las 11:53

Answer 2

Aquí está el código completo para ng repetir con json externo

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"
    }
]

0

ankush 1 jul. 2018 a las 18:27

Answer 3

¿Por qué no usas "ng-options" para seleccionar? toma un candado en esto API de AngularJs: seleccione

1

Emech 3 sep. 2014 a las 21:59

ng-repeat: llenar opciones desplegables con matriz

3 respuestas

Html

Test.json

Preguntas relacionadas

Nuevas preguntas

javascript