Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
418 views
in Technique[技术] by (71.8m points)

javascript - 使用AngularJS和ng-repeat初始化选择(Initializing select with AngularJS and ng-repeat)

I'm trying to get select-box to start off with a pre-filled option using ng-repeat with AngularJS 1.1.5.(我正试图让选择框从使用Ang-repeat和AngularJS 1.1.5的预填充选项开始。)

Instead the select always starts out with nothing selected.(相反,选择始终从未选择任何内容开始。) It also has an empty option, which I don't want.(它也有一个空选项,我不想要。) I think that there is a side effect of nothing being selected.(我认为没有被选中的副作用。)

I can get this working using ng-options instead of ng-repeat, but I want to use ng-repeat for this case.(我可以使用ng-options而不是ng-repeat来使用它,但我想在这种情况下使用ng-repeat。)

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.(虽然我的缩小示例没有显示,但我也想设置每个选项的title属性,据我所知,使用ng-options无法做到这一点。)

I don't think this is related to the common AngularJs scope/prototypical inheritance issue.(我不认为这与常见的AngularJs范围/原型继承问题有关。)

At least I don't see anything obvious when inspecting in Batarang.(至少我在Batarang检查时没有看到任何明显的东西。) Plus, when you pick an option in the select with the UI, the model does update correctly.(此外,当您使用UI选择选项中的选项时,模型会更新正确。)

Here's the HTML:(这是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>

And the JavaScript:(和JavaScript:)

function AppCtrl($scope) {

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

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

JS Fiddle for this : http://jsfiddle.net/coverbeck/FxM3B/2/(JS小提琴: http//jsfiddle.net/coverbeck/FxM3B/2/)

  ask by Charles O. translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.(如果您不想使用正确的ng-options ,可以使用option指令的条件检查逻辑添加ng-selected属性,以进行预选工作。)
<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(工作演示)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...