标签: angularjs-ng-repeat

AngularJS - ng-repeat不适用于内部属性

这是一个我想与ng-repeat一起使用的对象,但是它无法看到内部firstlang属性:

$scope.school{
  name  : "stackoverflow",
  sub   :{
    firstlang : "kannada"
  }
}
Run Code Online (Sandbox Code Playgroud)

这是我的重复:

<ul>
    <li ng-repeat="index in school.sub">
        first language is = {{index.firstlang}}
   </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

期望的结果是: first language is = kannada

angularjs angularjs-ng-repeat

1
推荐指数
1
解决办法
3678
查看次数

如何使用多个级别的json重复到html表?

我有社交媒体统计的对象.我正在尝试将它们重复到表格中.这是我的傻瓜.

HTML:

<table>
      <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData}}</td>
      </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

控制器对象:

 $scope.data = { buzz:0, 
                  Delicious:121,
                  Facebook: 
                  { 
                    like_count: "6266",
                    share_count: "20746"
                  },
                  GooglePlusOne:429,
                  LinkedIn:820,
                  Twitter:4074
                };
Run Code Online (Sandbox Code Playgroud)

当我到达Facebook结果时遇到问题.在<td>整个对象中显示(因为它应该与我如何设置我的代码).但我宁愿发生的是重复该对象并显示单元格中的键和值.

我尝试做一些事情,看看是否metricData是一个对象,并做了某种ng-repeat.但我没有运气.关于如何在单元格中显示内部对象(键和值)的任何想法?

json html-table object angularjs angularjs-ng-repeat

1
推荐指数
1
解决办法
6511
查看次数

angularjs ngrepeat插入批次

它只是我或重复DOM插入而不是批量.众所周知,DOM操作很慢,操作应该按性能进行批处理.在集合上使用ng-repeat时,它应该在内存中创建DOM元素,然后一次插入所有元素,而不是一次插入一个.

关于如何获得这种行为有什么建议吗?

javascript performance dom angularjs angularjs-ng-repeat

1
推荐指数
1
解决办法
1673
查看次数

当使用ng-form和ng-repeat时,AngularJs单选按钮被连接

请参阅此plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

在包含单选按钮组的ng-repeat上使用ng-form标签时,单选按钮被链接,因此如果您在一次重复重复中选中一个单选按钮,它将在所有其他重复按钮中取消选择.这让我感到困惑,因为ng-repeat的模型与其他项目隔离.这不仅是使用ng-repeat时的问题.当具有带有隔离范围的自定义指令的多个实例时,它也会出现

<div ng-form name="myForm">
Run Code Online (Sandbox Code Playgroud)

在Plnkkr中尝试添加一些项目并检查某些项目上的单选按钮.它们应该是独立的,但它们不是.

这是Angular中的错误吗?如果不是为什么它以这种方式工作,我该如何解决它?

<form name="mainForm" ng-submit="submitAll()">
      <ul>
        <li ng-repeat="item in items" ng-form="subForm">          
          <input type="text" required name="name" ng-model="item.name"/>
          <input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
          <input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
          <span ng-show="subForm.name.$error.required">required</span>
          <button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
        </li>
      </ul>
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>
Run Code Online (Sandbox Code Playgroud)

forms angularjs angularjs-directive angularjs-ng-repeat

1
推荐指数
1
解决办法
4731
查看次数

更改列表排列 - HTML和CSS

我得到如下列表

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

如何使列表安排像这样.

 1  2    5  6    9  10
 3  4    7  8   11  ....etc
Run Code Online (Sandbox Code Playgroud)

要么

 1  3    5  7     9 11
 2  4    6  8    10 .... etc 
Run Code Online (Sandbox Code Playgroud)

我需要这种安排,因为我使用角度ng-repeat,所以我需要每个数字都有相同的元素.我不介意你们是否使用其他元素给出答案,但每个数字必须具有相同的元素.谢谢

p/s:滚动时数字会增加,就像无限滚动一样.

html css html5 css3 angularjs-ng-repeat

1
推荐指数
1
解决办法
1200
查看次数

单击该项目时,从ng-repeat数组中拼出项目

我有一系列我正在重复的项目.

<li ng-repeat="lineItem in lineItems" class="bouncy-slide-left">
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label for="expenses">{{lineItem.labels.name}}Expense:</label>
        <br>
        <select name="expenses" ng-model="expense.name" class="form-control" style="width: 175px;">
            <option value="{{expense.name}}" ng-repeat="expense in expenses">{{expense.name}}</option>
        </select>
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label>Material Cost:</label>
        <br>
        <input type="text" ng-model="expense.cost" class="form-control" name="material" placeholder="5.00">
    </div>
    <div class="form-group col-sm-5 col-lg-2  col-xl-2 pad-right">
        <label>Quantity:</label>
        <br>
        <input type="text" ng-model="expense.quantity" class="form-control" name="quantity" placeholder="5">
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label>Labor Rate:</label>
        <br>
        <input type="text" ng-model="expense.labor" class="form-control" name="labor" placeholder="20.00">
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 …
Run Code Online (Sandbox Code Playgroud)

splice angularjs angularjs-ng-repeat angularjs-ng-click

1
推荐指数
1
解决办法
5120
查看次数

在嵌套的ng-click中,ng-click触发两次

我在尝试使用ng-click列表内部时遇到问题,该列表是另一个包含ng-click事件的列表的子列表.以下是我的代码

<ul>
  <li
    ng-repeat="facet in node.Facets"
    ng-click="updateNav(facet.Action)"
    ng-cloak
   >
    {{facet.DisplayValue}}
    <ul>
      <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
        ng-click="updateSubNav(sub.Action)"
      >
        {{sub.DisplayValue}}
      </li>
     </ul>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是,当我点击updateSubNav它时会自动触发updateNav.如何防止触发updateNav当我点击updateSubNav(因为我希望这两种方法独立工作?

javascript angularjs angularjs-ng-repeat angularjs-ng-click

1
推荐指数
1
解决办法
445
查看次数

根据所选国家,需要填写州和城市

HTML:

<label for="country">Country *</label>
 <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
                ng-change="GetSelectedCountry()">
 <option value=''>Select</option>
</select>    
 <label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
         ng-change="GetSelectedState()"><option value=''>Select</option>
 </select>
  <label for="city">City *</label>
 <select id="city" ng-disabled="!citiessource || !statessource" ng-model="city"><option value=''>
  Select</option>
<option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
 </select>
Run Code Online (Sandbox Code Playgroud)

JS:

$scope.countries = {

                'USA': {
                    'Alabama': ['Montgomery', 'Birmingham'],
                    'California': ['Sacramento', 'Fremont'],
                    'Illinois': ['Springfield', 'Chicago']
                },
               'India': {
                    'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                    'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                    'Rajasthan': ['Jaipur', 'Ajmer', …
Run Code Online (Sandbox Code Playgroud)

angularjs ng-repeat angularjs-ng-repeat angularjs-ng-options

1
推荐指数
1
解决办法
2万
查看次数

在ng-repeat中增加$ index

$ index如何ng-repeat增加特定值?例如,在这个小提琴http://jsfiddle.net/Lvc0u55v/11811/中,值需要一次显示两个.所以下一次迭代应该以第三个值而不是第二个值开始.

<div ng-controller="MyCtrl">
  <div ng-repeat="text in arr">
   <span>{{arr[$index]}}</span> 
   <span>{{arr[$index+1]}}</span> 
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-ng-repeat

1
推荐指数
1
解决办法
3493
查看次数

表格行中的多个ng-repeat

我想使用angularJS并使用ng-repeat来显示我的数据。我有一个JSON,其中我必须按ID /名称对特定的项目行进行分组。我不确定如何实现特定的输出。我添加了我需要的输出片段。

var obj = [{
    "id": 101,
    "name": "Victor",
    "address": "Mumbai"
    "order": [{
        "itemName": "Bulb",
        "quantity": 10
      },
      {
        "itemName": "Soap",
        "quantity": 3
      },
      {
        "itemName": "Towel",
        "quantity": 1
      }
    ]
  },
  {
    "id": 102,
    "name": "Francis",
    "address": "Nagpur"
    "order": [{
        "itemName": "Remote",
        "quantity": 1
      },
      {
        "itemName": "Bread",
        "quantity": 2
      }
    ]
  }
]
Run Code Online (Sandbox Code Playgroud)
<table border="1" width="100%">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Address</th>
    <th>Item Name</th>
    <th>Quantity</th>
  </tr>

  <!--- below is the output that i want -- uncomment and see the …
Run Code Online (Sandbox Code Playgroud)

angularjs-ng-repeat

1
推荐指数
1
解决办法
4479
查看次数