使用AngularJS和ng-repeat初始化select

133

我正在尝试使用AngularJS 1.1.5的ng-repeat从选择框开始使用预填充选项。相反，选择始终始于未选择任何内容。它还有一个空选项，我不想要。我认为没有选择任何东西都会带来副作用。

我可以使用ng-options代替ng-repeat来工作，但是在这种情况下我想使用ng-repeat。尽管我缩小的示例没有显示出来，但我也想设置每个选项的title属性，据我所知，没有办法使用ng-options来实现。

我认为这与常见的AngularJs范围/原型继承问题无关。至少在巴塔朗检查时，我看不到任何明显的东西。另外，当您在带有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小提琴为此：http : //jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs

— 查尔斯·O
source

1

之所以创建ngOption，是因为没有干净的方法可以使用ngRepeat做到这一点。选择该选项后，ngRepeat会展开。您是否尝试过在选项上设置ngSelect

— TheSharpieOne 2013年

是! ngSelected有效！我将发布更新的工作JsFiddle。

— 查尔斯·O。

应该注意的是，在AngualrJS 1.2中，此代码的工作方式有所不同-它不会创建新的空<OPTION>元素，但是，它只能选择列表框中的第一个选项。您可以在这里

— VitalyB 2014年

226

好。如果您不想使用正确的方法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

— zs2020
source

37

我会给你功劳的，因为您可以自己弄清楚并做了完整的例子。尽管我不同意您对ng-options是“正确方法”的评论。:)我一直都在使用ng-options，但这需要做ng-options不支持的操作，尽管它很小。Angular文档说您也可以使用ng-repeat。谢谢，查尔斯

— 查尔斯·O。

谢谢，这是禁用某些选项的简便方法。

— 多里安

11

ng-options仅在适合您的用例的情况下才是正确的。您可能在option / optgroup字段等中需要其他属性/类。–

— mystrdat 2014年

6

有时“正确的方法”不起作用（例如，如果您要翻译填充选项名称的字符串）

— btk 2015年

11

我认为ng选择的表达式必须没有{{}}：ng-selected =“ operator.value == filterCondition.operator”

— mvermand 2015年

35

对于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>

— 杰里米·里克尼斯
source

3

您好Jeremy-我正在尝试不使用ng-options的情况。就像我在问题中回答Shaun时所说的那样，我想在每个选项上设置title属性，据我所知，我无法使用ng-options来实现。谢谢，查尔斯

— 查尔斯·O。2013年

9

感谢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'}
     ]
}

— 查尔斯·O
source

对不起，发表评论。我不想举一个例子，也不是100％肯定会奏效。这只是预感。

— TheSharpieOne

9

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

如果要选择默认选项，则可以在控制器的范围内进行设置

$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>

— 阿玛杜
source

2

很好，但是Angular创建了一个空白选项。如何避免这种情况？

— MarceloBarbosa 2015年

1

如建议的那样，您需要使用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>

— Shaunhusain
source

你知道为什么吗，你确定吗？文档（docs.angularjs.org/api/ng.directive:select）表示，仅在绑定到非字符串值时才需要使用ng-options。就像我说的那样，我想使用title属性，而ng-options则无法做到这一点。类似于<option title =“此选择的详细说明” ...>谢谢。

— Charles O.

我认为文档中的注释尚不清楚，实际上意味着您将必须在模型中使用字符串，并在选项中使用字符串数组。如果您不介意使用“ title”属性的原因是什么，我不会在W3C w3schools.com/tags/tag_option.asp上看到它，也不会真正使用它。您不能只是将描述存储在对象中，然后仍然检索该数据，因为这就是模型现在要绑定的数据？

— shaunhusain 2013年

在链接到的W3C页面上，如果单击“全局属性”链接，则会看到option元素支持title属性。我使用title属性只是为了显示“工具提示”文本，这样，如果将鼠标悬停在一个选项上，就可以对该选项的含义进行更大的描述。这是一件很小的事情，但是如果可能的话，拥有它会很好。

— 查尔斯·O。

@CharlesO。我想做和你一样的事。设置一个对象（非字符串值），但我也想在选项列表中使用标题。有没有解决的办法。我似乎找不到它……

— Wilt

1

如果您要使用md-select和ng-repeating角材料的md-option，则可以添加到此笔ng-model-options="{trackBy: '$value.id'}"所示的md-select标签中

码：

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

展开摘要

— Japheth Ongeri-inkalimeva
source