I am using AngularJS with JQM I create a drop-down for selecting value and data ies in it using AngularJS Controller. It works fine But when I add data-native-menu="false in <select> then strange executions I select first value it selected second.

My HTML Part

<div ng-controller="MyCtrl">
    <select data-native-menu="false" data-role="listview" ng-options="size as size.name for size in sizes " ng-model="item" ng-change="update()"></select>
     {{item.code}} {{item.name}}
</div>

JS Part

myApp.controller('MyCtrl',function($scope){
    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
    console.log($scope.item.code, $scope.item.name)
}});

If I remove data-native-menu="false" data-role="listview" then code works fine

Please Help Me

Demo Page of My Example is Here

I am using AngularJS with JQM I create a drop-down for selecting value and data ies in it using AngularJS Controller. It works fine But when I add data-native-menu="false in <select> then strange executions I select first value it selected second.

My HTML Part

<div ng-controller="MyCtrl">
    <select data-native-menu="false" data-role="listview" ng-options="size as size.name for size in sizes " ng-model="item" ng-change="update()"></select>
     {{item.code}} {{item.name}}
</div>

JS Part

myApp.controller('MyCtrl',function($scope){
    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
    console.log($scope.item.code, $scope.item.name)
}});

If I remove data-native-menu="false" data-role="listview" then code works fine

Please Help Me

Demo Page of My Example is Here

• javascript
• jquery
• jquery-mobile
• angularjs

• What do you want us to do with your demo? – Maxim Shoustin Commented Sep 20, 2013 at 8:44

3 Answers 3

You can find working code in Fiddle

html

<div ng-controller = "fessCntrl" > 
 <div query-mobile-tpl>
  <select data-role="listview" data-inset="true" ng-options="size as size.name for size in sizes " ng-model="item" x-ng-change="update(item)"></select>
  <pre> {{item.code | json}} {{item.name | json}}</pre>
  </div>
</div>

controller

 var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
    console.log($scope.item.code, $scope.item.name)
    };
});


fessmodule.directive('jqueryMobileTpl', function() {
  return {
    link: function(scope, elm, attr) {
      elm.trigger('create');
    }
  };
});

fessmodule.directive('repeatDone', function () {
    return function (scope, element, attrs) {
        // When the last element is rendered
        if (scope.$last) { 
            element.parent().parent().trigger('create');
        }
    }
});

fessmodule.$inject = ['$scope'];

Sounds like you use old angular sources or get collisions with other sources.

Hope it will help you

<div id="main" data-role="page" ng-controller="MainController">
    <div data-role="content">
        <div>
            <select data-native-menu="false" data-role="listview">
                <option ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
            </select>
            <select data-native-menu="false" data-role="listview">
                <option ng-repeat="type in types" value="{{type.id}}">{{type.name}}</option>
            </select>
            <select data-native-menu="false" data-role="listview">
                <option ng-repeat="duration in durations" value="{{duration.id}}">{{duration.name}}</option>
            </select>
        </div>
    </div>
</div>


var mod = angular.module("ngm", []);

mod.controller('MainController', function ($scope) {
    $scope.categories = [{
        "id": "1",
            "name": "Indoor"
    }, {
        "id": "2",
            "name": "Outdoor"
    }],
    $scope.types = [{
        "id": "1",
            "name": "n1"
    }, {
        "id": "2",
            "name": "n2"
    }],
    $scope.durations = [{
        "id": "1",
            "name": "Minute"
    }, {
        "id": "2",
            "name": "Hour"
    }];
});

Fiddle http://jsfiddle/t5k5h/

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Fruits = [{
                Id: 1,
                Name: 'Apple'
            }, {
                Id: 2,
                Name: 'Mango'
            }, {
                Id: 3,
                Name: 'Orange'
            }];

            $scope.GetValue = function (fruit) {
                var fruitId = $scope.ddlFruits;
                var fruitName = $.grep($scope.Fruits, function (fruit) {
                    return fruit.Id == fruitId;
                })[0].Name;
                $window.alert("Selected Value: " + fruitId + "\nSelected Text: " + fruitName);
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <select ng-model="ddlFruits" ng-options="fruit.Id as fruit.Name for fruit in Fruits track by fruit.Id"
            ng-change="GetValue()">
        </select>
    </div>
</body>
</html>