チェックボックスのスコープはバインドされていますが、angular.jsのドットでも更新されません。1.6.x

Question

リサーチ記事のDisclosures submission（app/views/research/disclosure.html.erb）に関連するコードはここにあります。

var researchDisclosureApp = angular.module('researchDisclosureApp', []); 

researchDisclosureApp.controller('submissionController', ['$scope', function($scope){ 
    $scope.checkbox = { 
     articleCheckbox1 : false 
    }; 
}]); 

私のhtmlコード

<div class="container dashboard-container" ng-app="researchDisclosureApp" ng-controller="submissionController"> 
    <div class="nra-heading-area"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <div class="nra-heading">New Research Article</div> 
     </div> 
     <div class="col-sm-6"> 
     <a href="/research_guidelines" class="nra-guidelines">Guidelines for Writing Research</a> 
     <div class="clearfix"></div> 
     </div> 
    </div> 
    </div> 

    <div class="disclosure-right"> 
    Your article is ready to publish. Please complete the required disclosures below to complete the submission. 
    </div> 


    <form id="disclosureContianer" name="disclosuresForm"> 
    <div class="ArticleStep2MainBox"> 
     <p class="ArticleStep2MainText">1. Please Confirm:</p> 
     <div class="ArticleStep2Text01"> 
     <div class="ChoiceButtonBoxWA"> 
      <input type="checkbox" checked id="articleCheckbox1" ng-model="checkbox.articleCheckbox1"/> 
     </div> 
     I have prepared this research note in accordance with Code of Conduct. 
     {{checkbox.articleCheckbox1}} 
     </div> 

私の結果は、私はオフにしても更新されることなくのみ虚偽表示またはフロントエンド

Answer 1

上の{{checkbox.articleCheckbox1}}セクションでチェックボックスをチェックしています

あなたのコードが1.6以上でも動作しているように見えますが、チェックされた属性を削除しました。もしng-modelを提供すれば、それはあなたのために機能します。

var researchDisclosureApp = angular.module('researchDisclosureApp', []); 
 

 
researchDisclosureApp.controller('submissionController', ['$scope', function($scope) { 
 
    $scope.checkbox = { 
 
    articleCheckbox1: false 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
 
<div class="container dashboard-container" ng-app="researchDisclosureApp" ng-controller="submissionController"> 
 
    <div class="nra-heading-area"> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
     <div class="nra-heading">New Research Article</div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <a href="/research_guidelines" class="nra-guidelines">Guidelines for Writing Research</a> 
 
     <div class="clearfix"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="disclosure-right"> 
 
    Your article is ready to publish. Please complete the required disclosures below to complete the submission. 
 
    </div> 
 

 

 
    <form id="disclosureContianer" name="disclosuresForm"> 
 
    <div class="ArticleStep2MainBox"> 
 
     <p class="ArticleStep2MainText">1. Please Confirm:</p> 
 
     <div class="ArticleStep2Text01"> 
 
     <div class="ChoiceButtonBoxWA"> 
 
      <input type="checkbox" id="articleCheckbox1" ng-model="checkbox.articleCheckbox1" /> 
 
     </div> 
 
     I have prepared this research note in accordance with Code of Conduct. {{checkbox.articleCheckbox1}} 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

あなたがチェックボックスはデフォルトではチェックされたい場合は、

<input type="checkbox" checked ng-model="checkbox.articleCheckbox1"/> 

に変更することができます。

<input type="checkbox" ng-checked="true" ng-model="checkbox.articleCheckbox1"/>