当使用模型选择输入时，在 ng-repeat 中显示项目列表 [英] Show a list of items inside an ng-repeat when an input is selected with model

问题描述

所以，我有这个 ng-repeat，它在 subj.Prerequisites 中有一个模型，subj.Prerequisites 可以包含一个数组，例如 ['SUBJ1', 'SUBJ2'].我想要做的是当我在这个 ng-repeat 中点击我的输入文本时，下面会显示一个主题列表，允许多选，然后将多个选定的项目绑定到点击的输入文本.

<md-input-container flex class="no-error-spacer uk-margin-remove"><label>先决条件</label><input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true"></md-input-container>
<选择多个><option ng-repeat="sb in subject" value="sb.subjectCode>{{ sb.subjectCode }}</option></选择>

不过这对我来说有点困难.请有人帮助我.非常感谢！

解决方案

根据我对您问题的理解.请看看这个工作的plunker :

 
<label>{{subj.subjectCode}} 的先决条件</label><input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
<select ng-model="multiPre[selected]" 多个><option ng-repeat="sb in subject[selected].prerequisites">{{sb}}</option></选择>

https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview

PS:为了你对模型的理解，我特意留下了 {{multipre}}.

编辑开始:

试试这个:https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview

这符合您的要求.

So, I have this ng-repeat which has a model inside subj.Prerequisites, subj.Prerequisites can contain an array e.g ['SUBJ1', 'SUBJ2']. What i wanted to do is when i click on my input text inside this ng-repeat there will be a shown list of subjects below which allow multiple selection and then with the multiple selected items should be binded to the clicked input text.

<div  ng-repeat="subj in sem.subjects track by $index">
   <md-input-container flex class="no-error-spacer uk-margin-remove">
      <label>Prerequisites</label>
        <input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true">
   </md-input-container>
</div>

<select multiple>
 <option ng-repeat="sb in subjects" value="sb.subjectCode>{{ sb.subjectCode }}</option>
</select>

Its kind the hard for me though. Please someone help me. Thank you so much!

解决方案

As per my understanding of your question. Please look into this working plunker :

    <div ng-repeat="subj in subjects track by $index">
      <label>Prerequisites for {{subj.subjectCode}}</label>
      <input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
  </div>
  <select ng-model="multiPre[selected]" multiple>
    <option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
  </select>

https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview

PS: I have left {{multipre}} intentionally for your understanding of model.

Edit Start :

Try This : https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview

This addressees to your requirement.

这篇关于当使用模型选择输入时，在 ng-repeat 中显示项目列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！