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>

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

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

1 个答案: