4

我正在使用带有 JQM 的 AngularJS 我创建了一个下拉列表，用于使用 AngularJS 控制器在其中选择值和数据。它工作正常但是当我添加奇怪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"然后代码工作正常

请帮我

我的示例的演示页面在这里

4

3 回答 3

7

您可以在中找到工作代码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'];

听起来您使用旧的角度源或与其他源发生冲突。

希望对你有帮助

于 2013-09-20T08:51:25.877 回答
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/

于 2013-09-20T09:01:59.420 回答
1 
<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>
于 2016-06-21T16:11:49.270 回答