问Onsen-ui引用on. var属性的组件
EN

Stack Overflow用户

提问于 2015-02-05 22:43:59

回答 1查看 997关注 0票数 0

我正在使用onsen-ui，我有以下问题：

我有一堆像这样的元器件：

-->ons-sliding-menu var="menu"
 |
 |-->ons-page
    |
    -->ons-list-item
      |
      |-->ons-switch var=myswitch

为什么我不能从角度控制器内部引用var 'myswitch‘？角度控制器设置在ons page标签中。

提前谢谢你。

onsen-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-20 05:14:28

当然可以，您可以看到工作的CodePen 这里。如您所见，我使用了<ons-switch>方法isChecked()和setChecked(isChecked)，没有任何问题。如果需要多个开关，不要使用var，而是使用ng模型，并将其绑定到控制器内的变量，并从那里管理元素。这是一个例子，您可以找到工作的CodePen 这里

单开关

<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    
    <script>
        angular.module('myApp', ['onsen'])
            .controller('DemoController', function($scope) {
                
                
                $scope.changeSwitchStatus = function(){
                    
                        if($scope.mySwitch.isChecked())
                            $scope.mySwitch.setChecked(false);
                        else
                            $scope.mySwitch.setChecked(true);
                    
                };
            });
    </script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
    
    <ons-template id="page1">
        <ons-navigator ng-controller="DemoController">
           <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                    </div>
                    <div class="center">Page 1</div>
                </ons-toolbar>
                
                <ons-list>
                    <ons-list-item class="item">
                        <ons-switch var="mySwitch"></ons-switch>
                    </ons-list-item>
                </ons-list>
                <ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
            </ons-page>
        </ons-navigator>
    </ons-template>
    
</body>
</html>

多开关

<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    
    <script>
        angular.module('myApp', ['onsen'])
            .controller('DemoController', function($scope) {
                $scope.switch = [
                    {
                        status: false
                    },
                    {
                        status: false
                    }
                ]; 
                
                $scope.changeSwitchStatus = function(){
                    for(var i = 0; i < $scope.switch.length; i++){
                        $scope.switch[i].status = !$scope.switch[i].status;
                    }
                };
            });
    </script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
    
    <ons-template id="page1">
        <ons-navigator ng-controller="DemoController">
           <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                    </div>
                    <div class="center">Page 1</div>
                </ons-toolbar>
                
                <ons-list>
                    <ons-list-item class="item" ng-repeat="item in switch">
                        <ons-switch ng-model="item.status"></ons-switch>
                    </ons-list-item>
                </ons-list>
                <ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
            </ons-page>
        </ons-navigator>
    </ons-template>
    
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28355488

复制

相似问题

问Onsen-ui引用on. var属性的组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Onsen-ui引用on. var属性的组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Onsen-ui引用on. var属性的组件
EN