Javascript 简单角度选择选项

我无法获得显示数组对象内容的角度

Controller.js

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var items = [
            { id: 1, name: 'first obj', type: { open: true, name: 'Global' } },
            { id: 2, name: 'second obj', type: { open: true, name: 'Loco-l' } },
            { id: 3, name: 'third obj', type: { open: true, name: 'Global' } }           
  ];
  console.log(items)
});

template.html

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item for item in myCtrl.items">
    <option value="">My default value</option>
  </select>
</div>

我的默认值

以下是JSFIDLE：

编辑：我想显示

item.type.name

，因此两个选择字段将显示“Global”，然后我将最终过滤结果以仅显示唯一的值。

以下是您的解决方案：。使用

ng options=“item.type.name for items in items”

要在选择中正确显示选项，必须使用$scope.items代替种子项目

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item.type.name for item in items">
    <option value="">My default value</option>
  </select>
</div>

我的默认值

这是您的解决方案：。使用

ng options=“item.type.name for items in items”

在select中正确显示选项，并且必须使用$scope.items代替种子项目

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="eachItem" ng-options="item.type.name for item in items">
    <option value="">My default value</option>
  </select>
</div>

我的默认值

您必须在

$scope

中定义项目，并更改显示名称，如下所示：

ng-options="item as item.type.name for item in items track by item.id"

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.items=[
{id:1，名称：'name of first object'，类型：{isImp:true，名称：'Global'}，
{id:2，name:'另一个两个别名'，类型：{isImp:true，name:'Loco-l'}，
{id:3，name:'另一个两个别名'，类型：{isImp:true，name:'Global'}
];
console.log（$scope.items）
});

我的默认值
您必须在
$scope
中定义项目，并更改显示名称，如下所示：

ng-options="item as item.type.name for item in items track by item.id"



var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.items=[
{id:1，名称：'name of first object'，类型：{isImp:true，名称：'Global'}，
{id:2，name:'另一个两个别名'，类型：{isImp:true，name:'Loco-l'}，
{id:3，name:'另一个两个别名'，类型：{isImp:true，name:'Global'}
];
console.log（$scope.items）
});

我的默认值
你想要这样的东西吗


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.items=[
{id:1，名称：'first obj'，类型：{open:true，名称：'Global'}，
{id:2，名称：'second obj'，类型：{open:true，名称：'Loco-l'}，
{id:3，名称：'third obj'，类型：{open:true，名称：'Global'}
];
});

我的默认值
你想要这样的东西吗


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.items=[
{id:1，名称：'first obj'，类型：{open:true，名称：'Global'}，
{id:2，名称：'second obj'，类型：{open:true，名称：'Loco-l'}，
{id:3，名称：'third obj'，类型：{open:true，名称：'Global'}
];
});

我的默认值
您应该试试

HTML

<div ng-app="myApp" ng-controller="myCtrl as myCtrl">
  <select ng-model="eachItem" ng-options="item as item.type.name for item in myCtrl.items track by item.id">
    <option value="">My default value</option>
  </select>
</div>

你应该试试

HTML

<div ng-app="myApp" ng-controller="myCtrl as myCtrl">
  <select ng-model="eachItem" ng-options="item as item.type.name for item in myCtrl.items track by item.id">
    <option value="">My default value</option>
  </select>
</div>

您的项目没有在
$scope
中定义，您希望在
小部件中实际使用哪些名称和值？您在这里混合了两种定义样式，但在这两种样式中都没有定义
项目。您有
$scope
，但没有使用它，您试图使用
myCtrl.items
，但您没有定义
myCtrl
（ControllerAs），也没有将
items
设置为
myCtrl
@TimBiegeleisen的属性。我想显示
item.type.name
，请参阅更新的帖子。在解决变量声明的问题后，您需要重新考虑您的下拉列表。您不能从子项填充下拉列表，您将得到仅用于2个选项的3行。如果您想创建一个选项列表来过滤此数组，您应该创建一个可能选项的单独数组。您的项目没有在
$scope
小部件中定义，您希望在
小部件中实际使用什么名称和值？您在这里混合了两种定义样式，但在这两种样式中都没有定义
项目。您有
$scope
，但没有使用它，您试图使用
myCtrl.items
，但您没有定义
myCtrl
（ControllerAs），也没有将
items
设置为
myCtrl
@TimBiegeleisen的属性。我想显示
item.type.name
，请参阅更新的帖子。在解决变量声明的问题后，您需要重新考虑您的下拉列表。您不能从子项填充下拉列表，您将得到仅用于2个选项的3行。若你们想制作一个过滤这个数组的选项列表，你们应该制作一个可能选项的单独数组。谢谢。我看到这个“as-for-in-track-by”语法使用了很多，这让我很困惑。事实上，它使用了这么多，我想这完全是我的理解不足。然而，这个解决方案是有效的。谢谢你，谢谢。我看到这个“as-for-in-track-by”语法使用了很多，这让我很困惑。事实上，它使用了这么多，我想这完全是我的理解不足。然而，这个解决方案是有效的。谢谢，我认为ng选项语法最有意义是错误的吗？如果您的数据源有重复的标识符，您可以使用“track by$index”。在这种情况下没有必要。在这里您可以了解更多：但是，正如我所说，在您的情况下没有必要。祝您好运！。我认为这种ng选项语法最有意义是错误的吗？如果您的数据源有重复的标识符，您可以使用“track by$index”。在这种情况下没有必要。在这里您可以了解更多：但是，正如我所说，在您的情况下没有必要。祝您好运！。这对我来说似乎是有意义的——而且确实是我更愿意采取的方法。然而，当我储存时，我不能让它工作