ng-repeat：用数组填充下拉选项答案

【问题标题】：ng-repeat: populate drop down options with arrayng-repeat：用数组填充下拉选项
【发布时间】：2023-03-25 06:39:02
【问题描述】：

我有一个简单的 JavaScript 对象，如下所示：

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

我想在选择框中显示'Architect' 的值。但是，在尝试执行 ng-repeat 时，单引号让我失望。

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

这不会填充选择框，它只是显示一个空的选择框。我假设它将单引号解释为字符串文字，但即使我添加单引号并将它们转义，它仍然无法按预期工作。我错过了什么吗？

Here is a sample plunker:

【问题讨论】：

这可能是一个愚蠢的问题，因为您可能有充分的理由引用引号...但是您是否尝试过删除它们？ plnkr.co/edit/tOxov9wOVspXiQiF4P1W?p=preview
我想删除它们，但我在一家大公司工作，我得到的数据有引号。我无法更改数据。

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

转义引号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

【讨论】：

你也可以使用<option ng-repeat="row in obj['\'Architect\'']" value="{{row}}">{{row}}</option>
"是引号的 html 实体。
我真的很惊讶这项工作，因为那些应该被解码然后被 JS 解释为两个未转义的引号。很有趣。
是的，但为什么需要？建筑师在引号中是它自己。为什么需要第二个？
单引号被解释为字符串文字，而不是字符串的一部分。

【解决方案2】：

为什么不使用“ng-options”进行选择？锁定这个 AngularJs API: select

【讨论】：

【解决方案3】：

这里是使用外部 json 重复 ng 的完整代码

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

【讨论】：