【问题标题】:Can I use ng-repeat to iterate over an array in AngularJS?我可以使用 ng-repeat 遍历 AngularJS 中的数组吗?
【发布时间】:2013-07-29 08:46:50
【问题描述】:

我在使用 AngularJS ng-repeat 时遇到了一些问题。这是我所拥有的:

<div ng:show="selected == 3">
    <div class="columns">
        <textarea rows="4" data-ng-model="modal.data.answer[1].text" cols="91">1</textarea>
    </div>
    <div class="columns">
        <label>Explanation</label>
        <textarea rows="2" data-ng-model="modal.data.answer[1].explanation" cols="91"></textarea>
    </div>
    <div class="columns">
        <div class="colx2-left">
            <span class="label">Correct</span>
            <input type="checkbox" data-ng-model="modal.data.answer[1].correct" class="check-box"><input type="hidden" value="false" name="Details[0].Correct">
        </div>
        <div class="colx2-right">
            <label>Image File</label>
            <input type="text" data-ng-model="modal.data.answer[1]image" class="full-width">
        </div>
    </div>
</div>

modal.data.answer 数组总是有六个元素。我可以使用 ng-repeat 为这些创建 HTML 并让它重复数组中的 [x] 数字,并让它在第一行将“selected =”的数字从 3 增加到 8 吗?

据我所知,我可以使用&lt;div ng-repeat="t in [3,4,5,6,7,8]"&gt; &lt;/div&gt;,但我怎样才能将 t 的值转换为:

data-ng-model="modal.data.answer[1].text"

【问题讨论】:

  • 不明白为什么你不能这样做.. ng:show 和 ng:repeat 不相互依赖。所以你应该能够做到..试试看。
  • 我不知道该怎么做,因为我看不到一个简单的例子,比如在文档中重复一个范围:docs.angularjs.org/api/ng.directive:ngRepeat我希望文档更好。很棒的产品,但文档对我来说真的很失望 :-( 我想我不是唯一一个,因为我在页面底部看到了大量的 cmets 和问题。

标签: angularjs


【解决方案1】:

您的编辑正朝着正确的方向前进,您可以轻松地遍历整数列表,您只需像这样使用索引的值

<div ng-repeat="t in [3,4,5,6,7,8]">
....
data-ng-model="modal.data.answer[t].text"
...

如果您想尝试http://jsfiddle.net/DotDotDot/tweyS/,我做了一个小提琴(输入字段只是在这里更改所选值,如您的代码示例中所示,以显示正确的字段)

玩得开心

【讨论】:

    【解决方案2】:

    不允许在转发器中重复。使用“track by”表达式指定唯一键。

      <div ng-repeat="n in [42, 42, 43, 43] track by $index">
         {{n}}
      </div>
    

    【讨论】:

    • omg,我花了半个小时试图弄清楚为什么没有显示任何内容并且控制台中没有错误。你知道为什么它不是默认的(track by)吗?
    猜你喜欢
    • 2013-09-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-09
    • 2019-03-16
    相关资源
    最近更新 更多