AngularJs: Select Value From DropDown

Question

I am using AngularJS with JQM I create a drop-down for selecting value and data comies 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

What do you want us to do with your demo?

Maxim Shoustin
– Maxim Shoustin

2013-09-20 08:44:41 +00:00
Commented Sep 20, 2013 at 8:44 — Maxim Shoustin
– Maxim Shoustin, Commented Sep 20, 2013 at 8:44

Maxim Shoustin · Accepted Answer · 2013-09-20 22:06:02Z

6

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

edited Sep 20, 2013 at 22:06

answered Sep 20, 2013 at 8:51

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blu Over a year ago

I run your fiddle example but i dont wont the native drop-down so when i include JQyery and JQuery Mobile Scripts then it cannot call the update method

Blu Over a year ago

i include the following files <script src="http://codeorigin.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" rel="stylesheet" />

Maxim Shoustin Over a year ago

fixed, seems now it works with mobile, added to directives to add create event. Enjoy

Blu Over a year ago

but when i put ` data-native-menu="false"` in select then again update method is not fired

Maxim Shoustin Over a year ago

yes, this is a problem, I think they can't do that with data-native-menu="true. but this is direction, I did my best for you.

Matija Grcic · Accepted Answer · 2013-09-20 09:01:59Z

<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.net/t5k5h/

hakuna · Accepted Answer · 2016-06-21 16:11:49Z

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/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>

Collectives™ on Stack Overflow

AngularJs: Select Value From DropDown

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related