Question

我正在使用ionic和angularjs创建android应用程序。在应用程序中我使用ng-include在我的页面中包含html内容。

checkbox.html：

<ul>
        <li ng-repeat="opt in $parent.checkboxOptions">
            <h4>
                <label><input type="checkbox" name="checkbox" ng-model="$parent.checkboxAnswer" value="{{opt.option_value}}">{{opt.option_value}}</label>
            </h4>
        </li>

</ul>

surveyCtrl.js

$scope.checkboxOptions = params.QuestAnswers;
$scope.next = function(){
    console.log($scope.checkboxAnswer);
}

显示undefined，另一件事是当我点击一个复选框时，它也会选中所有复选框。

surveyCtrls.js

 .directive('question', function ($compile) {
    return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.question, function(QuesHtml) {
        ele.html(QuesHtml);
        $compile(ele.contents())(scope);
       });
    }
  };
  })

 .directive('description', function ($compile) {
     return {
      restrict: 'A',
      replace: true,
      link: function (scope, ele, attrs) {
        scope.$watch(attrs.description, function(DescHtml) {
          ele.html(DescHtml);
          $compile(ele.contents())(scope);
          });
      }
    };
  })

 .directive('answers', function ($compile) {
    return {
    restrict: 'A',
     replace: true,
      link: function (scope, ele, attrs) {
       scope.$watch(attrs.answers, function(AnswerHtml) {
        ele.html(AnswerHtml);
       $compile(ele.contents())(scope);
     });
   }
  };
 })
.controller('surveyLoad', function($scope){


var QuestType  =  SurveyData[QuestionIndex].question_type;

var DrawHTML = {
                  'QuestionText': 'Some Text', 
                  'QuestionDesc': 'Some Desc',
                  'QuestAnswers': [{
                                      option_value: 'Red',
                                   }, {
                                      option_value: 'Blue',
                                   }];,
                  'scope'       : $scope
               };

  checkbox(DrawHTML);

}

})


 .controller('nextQuest', function($scope){

    $scope.QuestNext = function(){
       console.log($scope);
    }

 });


function checkbox(params){

   var $scope = params.scope;
   $scope.QuesHtml = "<p>"+params.QuestionText+"</p>";
   $scope.DescHtml = "<p>"+params.QuestionDesc+"</p>";

   $scope.checkboxOptions = params.QuestAnswers;
   $scope.AnswerHtml = "<div ng-include src=\"'surveyTemplate/checkbox.html'\"></div>";
}

survey.html

<div class="row">
            <div class="col question_div">
                <div class="qus_head">
                    <p>Question:  1/10</p>
                </div>
                    <h4 class="para"><span question="QuesHtml"></span> </h4>
                <div class="qus_footer">
                    <p>Maxime quis.</p>
                </div>
            </div>
        </div>


        <div answers="AnswerHtml">

        </div>



        <div class="row">
            <div class="col button_div">
                <ul>
                    <li><a href=""><img src="../img/next.png" style="width:70px;float:right" alt="next" ng-controller="nextQuest" ng-click="QuestNext()"></a></li>
                    <!-- <center><li><button style="align:center">Stop</button></li></center> -->
                    <li><a href=""><img src="../img/pre.png" style="width:70px;float:left" alt="previous" ></a></li>
                </ul>
            </div>
        </div>

有没有办法获取已选中复选框的值并阻止检查所有其他复选框？

Answer 1

使用ng-includes创建它自己的范围。通过使用opencv语法，您可以克服此问题。 https://docs.angularjs.org/api/ng/directive/ngController

controller as

并在您的控制器中：

<div id="ctrl-as-exmpl" ng-controller="Controller as ctrl">
   ...
    <li ng-repeat="opt in ctrl.checkboxOptions">
        <h4>
            <label><input type="checkbox" name="checkbox" ng-model="ctrl.checkboxAnswer" value="{{opt.option_value}}">{{opt.option_value}}</label>
        </h4>
    </li>
   ...
</div>

变为

$scope.checkboxOptions = params.QuestAnswers;

等等。

关于此语法的AngularJS plunker： https://plnkr.co/edit/DB1CpoWLUxQ9U8y558m1?p=preview

此致埃里克

Answer 2

你需要在html中进行一些修正。

<label><input type="checkbox" name="checkbox" ng-model="opt.option_value">{{opt.option_value}}</label>

使用ng-model="$parent.checkboxAnswer"，all checkbox will share common model。

因此，它会同时更新。

因此，当您check/uncheck时，它会check/uncheck所有人。

并且，您不需要使用value，角度使用ng-model属性进行价值评估，而不是value

Answer 3

(function(angular) {
  'use strict';
  angular.module('MyApp', [])
    .controller('AppCtrl', SettingsController1);

  function SettingsController1($scope) {

    $scope.options = {
      'checkboxAnswer': ''
    };
    $scope.checkboxOptions= [{
      type: 'phone',
      value: '917xxxxxxxx'
    }, {
      type: 'email',
      value: 'sajankumarv@example.org'
    }];
  }


})(window.angular);

电台盒模板文件#radioobox.html

<ul>
  <li ng-repeat="opt in checkboxOptions">
    <h4>
            <label><input type="checkbox" ng-model="options.checkboxAnswer" ng-true-value="'{{opt.value}}'" ng-false-value="''">{{opt.type}}</label>
        </h4>
  </li>

  <h1>{{options.checkboxAnswer}}</h1>

</ul>

//在主index.html中，您只需使用ng-include指令

包含此radiobox.html

 <body ng-app="MyApp">
  <div ng-controller="AppCtrl">
      <div ng-include='"radiobox.html"'></div>
  </div>

</body>

我认为你不是孤立的范围所以你不必为你的案例使用$ parent。我做了一个简单的工作演示，让你明白请参考下面的链接。 https://plnkr.co/edit/aQMZBln5t0Fipwn1qloN?p=preview

Answer 4

Yupii ......我找到了解决方案..

这是解决方案：

<ul>
        <label ng-repeat="opt in $parent.checkboxOptions">
            <li>
                <h4>
                    <label><input type="checkbox" name="checkbox" ng-model="$parent.$parent.selected[opt.option_value]" >{{opt.option_value}}</label>
                </h4>
            </li>
        </label>
    </ul>

使用ng-include（AngularJS）时失去ng-model的范围

4 个答案: