angularjs - 如何在 div 标签上使用 ng-Option - AngularJs

Question

我是 angularjs 的新手，刚开始学习它。我正在尝试在不使用 select 的情况下从 angularjs 构建一个等效的下拉列表。

HTML

<div ng-app="App" ng-controller="OrderExportCtrl" >
<li class="box-ddl" >
    <div ng-model="fruit" ng-options="f for f in fruits"  class="ddlListSmall">
     </div>
</li>

JavaScript

var app = angular.module('App', []);
app.controller('OrderExportCtrl', function ($scope) {        
$scope.fruit = ['apple', 'orange', 'mango', 'grapefruit',              'banana', 'melon'];
});

请找到JsFiddle here .我没有明白我在做什么错误，但我的下拉菜单没有约束力。

请指导我解决我的问题。

Answer 1

ngOptions 仅适用于 select 元素(它由 select 指令使用)。您可以使用 ngRepeat达到相同的结果。您可以使用 ngClick直接设置您的模型。

<div class="list">
    <div class="option" ng-repeat="f in fruits" ng-bind="f"
        ng-click="fruit.selected = f"></div>
</div>

确保您设置的值位于 Controller 中定义的对象内，否则您将只将其设置在行的范围内而不是 Controller 的范围内。或者使用 ng-click="$parent.fruit = f" 来引用父范围，在这种情况下是 Controller 的(但可能不总是)。