2017-04-21 82 views
1

好吧,让我说实话,因为我是角度初学者,我不知道如何设计这个问题,我会尽我所能来解释这个问题。使用嵌套的ng-repeat与动态ng-model作为对象

图片1: enter image description here

正如你在上面的PIC我有一个情况我有一个类的列表中看到,每个班级不会有任何部分在它之下。你可以在每行上看到一个蓝色的按钮,点击它我需要知道选择了哪个“部分”。

这是问题陈述。

现在这里是HTML我对这个

<table class="table table-hover"> 
    <tbody> 
    <tr> 
     <th>Syllabus</th> 
     <th>{{phrase.className}}</th> 
     <th>Select Section</th> 
     <th>{{phrase.Operations}}</th> 
    </tr> 
    <tr ng-repeat="class in classes| filter:searchText"> 
     <td id="syl"> 
     <span ng-repeat="(sid, syllabi) in syllabus" ng-if="sid == class.classAcademicYear"> 
      {{ syllabi.yearTitle}} 
     </span> 
     </td> 
     <td id="cls">{{class.className}}</td> 
     <td id="sec"> 
     <div class="form-group"> 
      <select class="form-control" name="student_section" ng-model="selectedSection"> 
      <option ng-selected='class.sections[$index].id' ng-repeat="(key, section) in class.sections" value="{{section.id}}">{{section.sectionName}}</option> 
      </select> 
     </div> 
     </td> 
     <td id="vew"> 
     <button ng-click="edit(class.id)" type="button" class="btn btn-info btn-flat" title="{{phrase.ReadSchedule}}" tooltip><i class="fa fa-fw fa-th-list"></i></button> 
     </td> 
    </tr> 
    <tr ng-show="!classes.length"> 
     <td class="noTableData" colspan="3">{{phrase.NoClasses}}</td> 
    </tr> 
    </tbody> 
</table> 

在这里,我们看到了nseted NG重复我在哪里基于类列表中创建表行,现在这个类对象也持有部分对象里面你可以看到内部的NG-重复使用该classes.sections迭代现在是如下图所示

[{ 
    "id": 11, 
    "className": "Class-1 (STATE)", 
    "classAcademicYear": 2, 
    "classSubjects": "[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\"]", 
    "dormitoryId": null, 
    "sections": [{ 
    "id": 11, 
    "sectionName": "Section -1 (STATE)", 
    "sectionTitle": "section title -1", 
    "classId": 11, 
    "teacherId": "[\"10\",\"11\",\"12\",\"13\",\"14\",\"15\"]" 
    }] 
}, { 
    "id": 12, 
    "className": "Class-2", 
    "classAcademicYear": 2, 
    "classSubjects": "[\"0\"]", 
    "dormitoryId": null, 
    "sections": [{ 
    "id": 12, 
    "sectionName": "Section -1", 
    "sectionTitle": "section title -1", 
    "classId": 12, 
    "teacherId": "[\"0\"]" 
    }] 
}, { 
    "id": 13, 
    "className": "Class-3", 
    "classAcademicYear": 2, 
    "classSubjects": "[\"0\"]", 
    "dormitoryId": null, 
    "sections": [{ 
    "id": 13, 
    "sectionName": "Section -1", 
    "sectionTitle": "section title -1", 
    "classId": 13, 
    "teacherId": "[\"0\"]" 
    }] 
}, { 
    "id": 14, 
    "className": "Class-4", 
    "classAcademicYear": 2, 
    "classSubjects": "[\"0\"]", 
    "dormitoryId": null, 
    "sections": [{ 
    "id": 14, 
    "sectionName": "Section -1", 
    "sectionTitle": "section title -1", 
    "classId": 14, 
    "teacherId": "[\"0\"]" 
    }] 
}] 

我什么

类JSON对象的选项试图做的是为动态内部选择下拉元素设置ng模型,如下所示,以便每次选择该部分时,我都可以将蓝色按钮动作设置为任何部分id。

NG-模型= “selectedSection [class.id]”

这是行不通的。

我知道这可能不是足够的信息,但如果有人有兴趣帮助解决我这个问题,我可以分享进一步的细节。

+0

如果你给出一个工作代码(比如说jsbin或类似的东西)会好得多。 – paulpeters

回答

0

为了检查选择了什么ng重复行,你应该发送值$ index和$ parent。$ index(如果你有嵌套的ng-repeat)。

<button ng-click="edit($index, $parent.$index)" type="button"> 

它有帮助吗?

+0

$ parent。$ index is undefined! &我们可以访问第二个ng-repeat的$ index,我的意思是按钮必须在ng-repear中,当然,你的ng-click属性带有$ index,$ parent。$ index应该是 – BlackBurn027

+0

在第二个循环内。 – paulpeters

+0

我为什么要将按钮放在选项循环中?你可以再看看HTML吗? – BlackBurn027