将复选框添加到角度js手风琴中

时间:2015-08-10 03:15:20

标签: javascript angularjs

我是angularjs的新手。我试图将复选框添加到特定的scope.group

下面是我想要实现的内容和代码的模型。

enter image description here

 <accordion close-others="false">

    <accordion-group ng-repeat="group in groups" is-open="group.open">
        <accordion-heading>
            <i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
            <span class="title-pos" >{{group.title}}</span>
        </accordion-heading>
        {{group.content}}


     </accordion-group>

  </accordion>

     <script>


        angular.module('main',['ui.bootstrap'])
          .controller('AppCtrl', function($scope){

          $scope.groups = [
            {
              "title":"Series",

              "open":true
            },
            {
              "title":"Price Range",
              "content":"Content B",
              "open":true
            },
            {
              "title":"Engine Type",
              "content":"Content C",
              "open":false
            },
             {
              "title":"Engine Type",
              "content":"Content C",
              "open":false
            },
             {
              "title":"Life Style",
              "content":"Content C",
              "open":false
            },
             {
              "title":"Seats",
              "content":"Content C",
              "open":false
            },
            ];

        })


      </script>

我想将此复选框添加到引擎类型组。 期待任何帮助

提前致谢

2 个答案:

答案 0 :(得分:0)

String PRJT_PATH=""; //variable to store path of working directory. private void getdire() throws IOException{ File f=new File("."); File[] f1=f.listFiles(); PRJT_PATH=f.getCanonicalPath(); //get path details.for eg:-E:/java/dist } private void new_Doc_folder(){ //function for creating new folders try{ String strManyDirectories="Docs"+File.separator+"Bil_Img"; //i need to create 2 folders,1st a folder namedDocs and In Docs folder another folder named Bil_Img String SubDirectories="Docs"+File.separator+"EmpImgs"; //same as above but keep in mind that It will not create a Same folder again if already exists, // Create one directory boolean success = (new File(strManyDirectories)).mkdirs(); //create more than one directory boolean success1 = (new File(SubDirectories)).mkdir(); //Creates a single directory if (success && success1) { } }catch (Exception e){//Catch exception if any System.err.println("Error: " + e.getMessage()); } 替换为{{group.content}}

然后,您应该在“引擎类型”组的<div ng-bind-html="group.content"></div>部分内添加复选框HTML代码,类似于:

"content"

... { "title":"Engine Type", "content":'<input type="checkbox" name="checkbox1" value="Petrol">Petrol', "open":false }, ... $scope.groups中的每一个进入"content"内的任何一个进入<div ng-bind-html="group.content"></div>区域内的

最后,请确保将ngSanitize添加到模块依赖项中,如此plunkr

答案 1 :(得分:0)

您可以在内容区域中添加复选框

<accordion-group ng-repeat="group in groups" is-open="group.open">
    <accordion-heading>
        <i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
        <span class="title-pos" >{{group.title}}</span>
    </accordion-heading>
    <div ng-repeat="option in group.options">
        <!-- checkbox and text here -->
    </div>
 </accordion-group>

并重新组织您的数据以包含复选框模型

$scope.groups = [
    {
       "title":"Engine Type",
       "content":"Content C",
       "open":false,
       "options": [
           "Petrol", // or if you have id for them: {id:engine_petrol, name:"Petrol"}
           "Diesel",
           "Hybrid"
       ]
    }
];