Используйте ng-repeat для 2 массивов

Question

Используйте ng-repeat для 2 массивов

0

Здесь у меня есть 2 массива. Первый массив - это содержимое опции, а второй массив - тег опции (то есть A, B, C, D). Как я могу выполнить компоновку для 'input type = "radio"' при использовании ng-repeat?

Здесь я сначала пытаюсь сделать "w в optionTag", чтобы иметь теги "A", "B", "C", "D". Затем я хочу вывести "OptionA" сразу после "A" и этого переключателя.

В приведенном ниже коде он работает. Хотя проблема заключается в том, что радиокнопка появляется четыре раза после тега опции. Теперь отображается содержимое опции (OptionA, OptionB, OptionC, OptionD). Как сделать радиокнопку только один раз и сделать отображение содержимого после переключателя? Благодарю.

Другой вопрос. Иногда в массиве параметров может быть только 2 варианта. Как я могу показать только теги опций A и B?

Угловой код JS:

$scope.option=["OptionA","OptionB","OptionC","OptionD"]
$scope.optionTag=["A", "B", "C", "D"]

Код HTML:

<ul ng-repeat="w in optionTag">
  <li>{{w}}
    <input type="radio" data-ng-value="o"  ng-repeat="o in option" ng-model="my.Choice"/>{{o}}
  </li>
</ul>

S1ngS1ng 27 авг. 2015, в 05:21

Источник

2

Можете ли вы показать пример того, как это должно выглядеть при рендеринге?
Phil 27 авг. 2015, в 03:22
0

Вы имеете в виду, когда он работает? Просто четыре радио кнопки идут после каждого тега. И никакой опционный контент не обнаружился. То, что я пытался сделать, это сделать вывод, как: опция тега, переключатель, содержание опции.
S1ngS1ng 27 авг. 2015, в 03:25

Теги:

javascript

html

angularjs

arrays

2 ответа

0

Вам нужно использовать массив объектов. Лучший код, более простой для масштабирования. Проверьте ссылку, например.

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

$scope.option=[{Option: "A", OptionTag: "OptionA"}, {Option: "B", OptionTag: "OptionB"}, {Option: "C", OptionTag: "OptionC"}, {Option: "D", OptionTag: "OptionD"}]; 

}

<ul ng-repeat="w in option">
 <li>{{w.Option}}
  <form >
      <div ng-repeat=" o in option">
<input type="radio" name="select" data-ng-value="{w.OptionTg}"/> {{o.OptionTag}}
      </div>
  </form >
 </li>

</ul>
</div>

Код jsfiddle

jminterwebs 27 авг. 2015, в 02:39

Ещё вопросы

Можете ли вы показать пример того, как это должно выглядеть при рендеринге?
Вы имеете в виду, когда он работает? Просто четыре радио кнопки идут после каждого тега. И никакой опционный контент не обнаружился. То, что я пытался сделать, это сделать вывод, как: опция тега, переключатель, содержание опции.

machinehead115 · Accepted Answer · 2015-08-27T01-53-00.000Z

Должна быть корреляция между двумя массивами. Предполагая, что они оба упорядочены таким же образом, вы можете отслеживать $index при первом ng-repeat и ссылаться на текущий индекс при рендеринге переключателя.

<ul ng-repeat="w in optionTag track by $index">
    <li>{{w}}
        <input type="radio" ng-value="option[$index]" ng-model="my.Choice" />{{option[$index]}}
    </li>
</ul>

Должны ли они быть двумя отдельными массивами? Я бы структурировал бы лучше всего в качестве массива объектов:

Состав

$scope.options = [
    {
        'option': 'OptionA',
        'optionTag': 'A'
    },
    {
        'option': 'OptionB',
        'optionTag': 'B'
    },
    {
        'option': 'OptionC',
        'optionTag': 'C'
    },
    {
        'option': 'OptionD',
        'optionTag': 'D'
    }
]

HTML

<ul ng-repeat="optionObject in options track by $index">
    <li>{{optionObject.optionTag}}
        <input type="radio" ng-value="optionObject.option" ng-model="my.Choice" />{{optionObject.option}}
    </li>
</ul>