如何在div标签上使用ng选项-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。我不知道我犯了什么错误，但我的下拉列表没有约束力。

请指导我解决我的问题。

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>

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