初始化选择与AngularJS和NG-重复 [英] Initializing select with AngularJS and ng-repeat

查看:152
本文介绍了初始化选择与AngularJS和NG-重复的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图得到一个选择,开始了一个选项pre-选择使用AngularJS 1.1.5和NG-重复。相反,选择总是开始时什么也没有选择。它也有一个空的选项,我不希望 - 但我认为这是被选中的任何副作用

I'm trying to get a select to start off with one option pre-selected using AngularJS 1.1.5 and ng-repeat. Instead the select always starts out with nothing selected. It also has an empty option, which I don't want -- but I think that is a side effect of nothing being selected.

我能得到这个使用NG选项,而不是NG重复的工作,但我想用NG-重复这种情况。虽然我的收窄例子并没有表现出来,我也想设置每个选项的title属性,并没有办法做到这一点使用NG-选项,据我所知。

I can get this working using ng-options instead of ng-repeat, but I want to use ng-repeat for this case. Although my narrowed down example doesn't show it, I also want to set the title attribute of each option, and there is no way to do that using ng-options, as far as I know.

我不认为这是关系到普通AngularJs范围/原型的继承问题。至少在Batarang检查时,我看不出有什么明显的。另外,当你选择一个选项,在选择与UI,模型确实更新正确。

I don't think this is related to the common AngularJs scope/prototypical inheritance issue. At least I don't see anything obvious when inspecting in Batarang. Plus, when you pick an option in the select with the UI, the model does update correctly.

这里是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的:

And the 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/

感谢您的帮助,

查尔斯

推荐答案

确定。如果你不希望使用正确的方法 NG-选项,你可以添加 NG-选择属性用为选项条件检查电路指令,使pre-选择的工作。

OK. If you don't want to use the correct way ng-options, you can add ng-selected attribute with a condition check logic for the option directive to to make the pre-select work.

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

<大骨节病> 工作演示

这篇关于初始化选择与AngularJS和NG-重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆