来自外部 json 文件的 ng-options 默认值

Question

我有一个select

data-ng-model="layout" ng-options="layout.url as layout.name for layout in layouts"

从外部 json 文件填充：

{
"metaDescription": "My website description",
"metaKeywords": "keyword1, keyword2",
"siteTitle": "My Company",
"pageTitle": "Welcome ",
"layout": [
    { "name": "Cerulean",   "url": "cerulean" },
    { "name": "Cosmo",      "url": "cosmo" },
    { "name": "Cyborg",     "url": "cyborg" }
],
"test": "Lorem ipsum dolor"
}

还有控制器

function httpController($scope, $http) {

    $http.get('content.json').success (function(data){

        $scope.layouts = data.layout;
        $scope.layout = $scope.layouts[2];
    });
};

$scope.layout = $scope.layouts[2]; 应该设置为默认值，但它不起作用。

如果 JSON 数组在控制器中，它似乎可以工作，但我需要从外部 JSON 使用它 ，在这种情况下它不起作用！

如有任何帮助，我们将不胜感激。

Answer 1

像这样修改您的 ng-options：

ng-options="layout as layout.name for layout in layouts"

您的 ng-options 表达式采用以下格式：

select as label for value in array

根据 angular 文档，select 的定义是：

The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value.

您正在将 url 属性绑定到模型而不是整个对象。就是这个问题。

Answer 2

您只需将 .url 添加到您的 $scope.layout = $scope.layouts[2];

在您的 $http.get() 中执行以下操作。

$http.get('URLToGET')
.success(function(data){
    $scope.layouts = data.layout;
    $scope.layout = $scope.layouts[2].url;  //<--- .url
});

您的 HTML 将如下所示：

<select data-ng-model="layout" ng-options="layout.url as layout.name for layout in layouts">
     <option value="">Select Url</option>
</select>

这是一个新的更新工作示例

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {    
    
    $scope.data =  {
                        "metaDescription": "My website description",
                        "metaKeywords": "keyword1, keyword2",
                        "siteTitle": "My Company",
                        "pageTitle": "Welcome ",
                        "layout": [
                            { "name": "Cerulean",   "url": "cerulean" },
                            { "name": "Cosmo",      "url": "cosmo" },
                            { "name": "Cyborg",     "url": "cyborg" }
                        ],
                        "test": "Lorem ipsum dolor"
                      };
    
        $scope.layouts = $scope.data.layout;
        $scope.layout = $scope.layouts[2].url;
        
      
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
  
    
     <select ng-model="layout" ng-options="layout.url as layout.name for layout in layouts">
          <option value="">Select Url</option>
     </select>
      <label ng-bind="layout"></label>

  </div>
  </div>

澄清一下

When you use ng-options, the values of option tags written out by ng-options will always be the index of the array item the option tag relates to. This is because Angular actually allows you to select entire objects with select controls, and not just primitive types.

参考great answer by Ben Lesh for details on ngOptions as well as the ngOptions official docs.

来自外部 json 文件的 ng-options 默认值

ng-options default value from external json file

angularjs

ng-options