Question

我无法使用javascript获取并设置ons-checkbox元素的值。我已阅读文档并被卡住了。任何建议或方向将不胜感激。

肖恩

Answer 1

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

但是，如果您仍想使用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>

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

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

1 个答案: