onsen-ui - onsen-ui 获取和设置 ons-checkbox 的值

Question

我在使用 javascript 获取和设置 ons-checkbox 元素的值时遇到问题。我已经阅读了文档并被卡住了。任何建议或方向将不胜感激。

肖恩

Answer 1

如果你想为你的 OnsenUI 应用程序使用纯 JavaScript，我建议你使用 Onsen CSS 组件。换句话说，您只需添加所需的 Onsen CSS 组件的 css 即可为您的应用程序创建 OnsenUI 样式。然后，使用 JavaScript 访问这些组件，就像使用任何 HTML 组件一样。例如在这种情况下是一个复选框。请参阅此处有关如何设置/获取值以及检查状态的示例。

但是，如果您仍然想使用 OnsenUI 的元素。有两种方法可以做到：

1.直接在html页面中：

<!--Set the value directly in the tag-->
<section style="padding: 10px;">      
    <ons-checkbox 
      ng-model="answer" 
      ng-true-value="YES" 
      ng-false-value="NO">
      Yes or No?
    </ons-checkbox>
    <br>
    <!--Get the value directly-->
    <span>{{answer}}</span>  
</section>

2.通过AngularJS

page.html

<ons-page class="center" ng-controller="Test_Ctrl">
    <h1>Checkbox Value</h1>       
    <section style="padding: 10px;">      
        <ons-checkbox ng-model="answer">
          Yes or No?
        </ons-checkbox>
        <br>
        <!--Get the value directly-->
        <span>{{answer}}</span>  
    </section>

    <!--Get the value by the script-->
    <ons-button ng-click="check()">Result</ons-button>  
</ons-page>

应用程序.js

angular.module('myApp', ['onsen.directives']);

function Test_Ctrl($scope) {
    $scope.check = function (){
        if($scope.answer) //If the checkbox is checked.
            $scope.answer="YES";
        else //If the checkbox is unchecked.
            $scope.answer = "NO";

        alert($scope.answer);
    }
}