使用 AngularJS 和 ng-repeat 初始化选择

IT技术 javascript angularjs
2021-01-16 00:13:03

我试图让选择框开始使用 ng-repeat 和 AngularJS 1.1.5 的预填充选项。相反，选择总是从没有选择任何内容开始。它还有一个我不想要的空选项。我认为没有选择任何东西会产生副作用。

我可以使用 ng-options 而不是 ng-repeat 来完成这项工作，但我想在这种情况下使用 ng-repeat。虽然我的缩小示例没有显示它，但我也想设置每个选项的标题属性，据我所知，使用 ng-options 无法做到这一点。

我认为这与常见的 AngularJs 范围/原型继承问题无关。至少我在 Batarang 检查时没有看到任何明显的东西。另外，当您使用 UI 在选择中选择一个选项时，模型会正确更新。

这是 HTML：

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

和 JavaScript：

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

JS Fiddle 为此：http : //jsfiddle.net/coverbeck/FxM3B/2/

6个回答

行。如果您不想使用正确的方式ng-options，您可以ng-selected为option指令添加带有条件检查逻辑的属性，以使预选工作。

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

我认为 ng-selected 表达式必须没有 {{ }}： ng-selected="operator.value == filterCondition.operator"
2021-03-14 00:13:03
“正确的方法”有时不起作用（例如，如果您想翻译填充选项名称的字符串）
2021-03-17 00:13:03
我会给你功劳，因为你是自己想出来的，并做了完整的例子。尽管我不同意您关于 ng-options 是“正确方法”的评论。:) 我自己一直使用 ng-options，但这需要做一些 ng-options 不支持的事情，尽管它很小。Angular 文档说你也可以使用 ng-repeat 。谢谢，查尔斯
2021-03-20 00:13:03
ng-options 只有在它的用例适合你的情况下才是正确的。您可能需要 option/optgroup 字段等中的额外属性/类。
2021-03-25 00:13:03
谢谢，这是禁用某些选项的简单方法。
2021-04-10 00:13:03

对于 select 标签，angular 提供了 ng-options 指令。它为您提供了设置选项和设置默认值的特定框架。这是使用按预期工作的 ng-options 更新的小提琴：http : //jsfiddle.net/FxM3B/4/

更新的 HTML（代码保持不变） 

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
嗨杰里米 - 我正在尝试在没有 ng-options 的情况下做到这一点。就像我在我的问题和对 Shaun 的回复中所说的那样，我想为每个选项设置 title 属性，据我所知，我无法使用 ng-options 来做到这一点。谢谢，查尔斯
2021-03-24 00:13:03

angular 向 select 注入一个空选项元素的事实是，默认情况下绑定到它的模型对象在初始化时带有一个空值。

如果你想选择一个默认选项，那么你可以在控制器的范围内设置它 

$scope.filterCondition.operator = "your value here";

如果你想要一个空的选项占位符，这对我有用

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>
这很好，但 Angular 创建了一个空白选项。如何避免这种情况？
2021-04-06 00:13:03

感谢TheSharpieOne指出 ng-selected 选项。如果那是作为答案而不是作为评论发布的，我会做出正确的答案。

这是一个有效的 JSFiddle：http : //jsfiddle.net/coverbeck/FxM3B/5/。

我还更新了小提琴以使用我在原始帖子中遗漏的标题属性，因为它不是问题的原因（但这是我想使用 ng-repeat 而不是 ng-options 的原因） .

HTML：

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS：

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}
很抱歉作为评论发布。我不想举个例子，我也不是 100% 确定它会起作用。这只是一种预感。
2021-03-30 00:13:03

正如建议的那样，您需要使用 ng-options，不幸的是，我相信您需要引用默认数组元素（除非数组是字符串数组）。

http://jsfiddle.net/FxM3B/3/

JavaScript：

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML：

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>
我相信文档中的注释有点不清楚，实际上意味着您必须为模型使用一个字符串，并为选项使用一个字符串数组。如果您不介意使用“title”属性的原因是什么，我在 W3C w3schools.com/tags/tag_option.asp上看不到它并且不记得真的使用过它。难道您不能只将描述存储在对象中，然后仍然检索该数据，因为现在模型绑定到该数据了吗？
2021-03-18 00:13:03
在您链接到的 W3C 页面上，如果您单击 Global Attributes 链接，您将看到 option 元素支持 title 属性。我使用 title 属性只是为了显示“工具提示”文本，这样如果您将鼠标悬停在某个选项上，您就可以获得该选项含义的详细描述。这是一件小事，但如果可能的话，拥有它会很好。
2021-03-21 00:13:03
@查尔斯。我想和你做的一模一样。设置一个对象（非字符串值），但我也想在选项列表中使用一个标题。是否有解决方案。好像找不到了。。。
2021-03-28 00:13:03
你知道为什么吗？你确定吗？文档（docs.angularjs.org/api/ng.directive:select）说你只需要在绑定到非字符串值时使用 ng-options。就像我说的，我想使用 title 属性，而 ng-options 没有办法做到这一点。类似于 <option title="此选项的很长描述"...> 谢谢。
2021-04-13 00:13:03
其它你可能感兴趣的问题
上一篇如何在 vue javascript 中引用静态资产 下一篇获取：拒绝Promise并在状态不正常时捕获错误？