Question

我正在使用AngularJS和JQM我创建了一个下拉列表，用于使用AngularJS Controller选择其中的值和数据。它工作正常但是当我在data-native-menu="false中添加<select>然后执行奇怪的执行时我选择了第二个选择的第一个值。

我的HTML部分

<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部分

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)
}});

如果我删除data-native-menu="false" data-role="listview"，那么代码可以正常运行

请帮帮我

我的示例的演示页是Here

Answer 1

您可以在 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>

<强>控制器

 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'];

听起来像使用旧的角度来源或与其他来源发生碰撞。

希望它能帮到你

Answer 2

<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"
    }];
});

小提琴http://jsfiddle.net/t5k5h/

Answer 3

<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>

AngularJs：从DropDown中选择值

3 个答案: