1

AngularJS、JQuery Mobile、および JQuery Mobile Angular Adapter に基づくアプリの場合。

data-role="page" を使用してタグに ng-controller を設定すると、select タグの ng-model が完全に機能します。

<body ng-app>
    <div data-role="page" id="product" ng-controller="Controller">
        <div data-role="content">
            <select ng-model="color" ng-options="c for c in colors"></select>
            <button ng-click="Print()">print</button>

http://jsfiddle.net/ilya7u/Ddt7G/

body タグに ng-controller が存在する場合、ng-model を介して select タグに関連付けられた変数は変更されません。

<body ng-app ng-controller="Controller">
    <div data-role="page" id="product">
        <div data-role="content">
            <select ng-model="color" ng-options="c for c in colors"></select>

http://jsfiddle.net/ilya7u/qgbj2/

なぜ、どのように修正できますか？ページ数の多いアプリで1つのコントローラーを使いたい！

4

2 に答える 2

2

ページの html に ng-app を含めると、問題が解決します

試す

<html ng-app="myModule">
<body ng-controller="Controller">
    <div id="product" >
        <div data-role="content">
            <select ng-model="color" ng-options="c for c in colors"></select>
            <button ng-click="Print()">print</button>
        </div>
    </div>
</body>
</html>

コントローラーを次のように変更します

var myApp = angular.module('myModule',[]);
myApp.controller('Controller', function($scope) {
   $scope.colors = ['red', 'black', 'white'];
    $scope.color = $scope.colors[0];

    $scope.Print = function () {
        alert($scope.color);
    };
});

ここでフィドルを更新http://jsfiddle.net/qgbj2/2/

于 2013-07-20T12:36:23.583 に答える