How to Use ng-Option on div tags - AngularJs -

How to Use ng-Option on div tags - AngularJs -

i new angularjs , started learning it. trying build dropdown equivalent angularjs without using select.

html

<div ng-app="app" ng-controller="orderexportctrl" > <li class="box-ddl" > <div ng-model="fruit" ng-options="f 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']; });

please find jsfiddle here. not getting error doing, dropdown not binding.

please guide me prepare issue.

ngoptions select elements (it used select directive). can utilize ngrepeat accomplish same result. can utilize ngclick set model directly.

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

make sure value you're setting within object defined in controller, otherwise you'll set within row's scope rather controller's. alternatively utilize ng-click="$parent.fruit = f" reference parent scope, in case controller's (but may not be).

angularjs