Блог

У меня возникли проблемы с использованием javascript для получения и установки значения элементов ons-checkbox. Я прочитал документы и застрял. Любые советы или указания будут высоко оценены.

Шон

Если вы хотите использовать чистый JavaScript для своего приложения OnsenUI, я предлагаю вам использовать CSS-компонент Onsen. Другими словами, у вас будет стиль OnsenUI для вашего приложения, просто добавив css нужного компонента Onsen CSS. Затем используйте JavaScript для доступа к этим компонентам точно так же, как вы делаете это с любыми компонентами HTML. Например, в данном случае флажок. Пожалуйста, смотрите Пример здесь о том, как установить / получить значение, а также проверить статус.

Однако, если вы все еще хотите использовать элементы OnsenUI. Есть 2 способа сделать это:

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