标签: ng-repeat

Angular.js:使用ng-model进行ng-repeat中的下拉列表

我很难理解如何在ng-repeat中使用ng-model.在此上下文中,CargoItems是一个包含LoadPoint的对象列表.LoadPoint具有Id和Text属性.

我想显示文本,绑定到下拉列表中的当前选择,但我还想跟踪当然选择哪个Id.因此,我不确定如何使用select绑定更新这两个属性,或者通过显式使用标记,或者使用我还没有想到的ng-options.

所以有两个问题:

1)如何将选择列表中的文本和值正确绑定到CargoItem.LoadPoint上的Id和Text属性?我有一种感觉我的模型可能是错的?

2)如何使用ng-options默认为所选值?我想出了我自己的选项标签,但我想尽可能使用ng-options.

<div ng-repeat="cargoItem in cargo.CargoItems">
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select>
</div>
Run Code Online (Sandbox Code Playgroud)

提前致谢!

angularjs ng-repeat

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

从下拉列表中获取旧值和新值

我试图简单地从下拉列表中获取先前的值和新选择的值.在此示例中,下拉列表预先填充了分配用户的当前组.

当下拉列表更改时,我希望能够返回旧值和新值.我已经可以获得旧值,但我不知道如何返回新值.

控制器代码:

// User Object
userAccess = [{"user_name":"dodsosr11",
                  "group_level":1,
                  "user_id":500,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"keatikj09",
                  "group_level":1,
                  "user_id":250,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"malinag10",
                  "group_level":1,
                  "user_id":492,
                  "group_id":10,
                  "group_name":"Conferences_Admins"}];

//Group Object
groupAccess = [{"group_name":"Conferences_Admins",
                   "id":10,
                   "level_id":1},
               {"group_name":"ticket_sales",
                   "id":59,
                   "level_id":3},
               {"group_name":"Web Developers",
                   "id":1,
                   "level_id":1}];


$scope.reassignUser = function(){
    var oldGroup = this.user.group_id;
    var newGroup = ?????

};
Run Code Online (Sandbox Code Playgroud)

HTML:

<tr ng-repeat="user in userAccess">
    <td>{{ user.user_name}}</td>
    <td>
        <select ng-change="reassignUser()" 
                ng-model="user.group_name" 
                ng-options="g.group_name as g.group_name for g in groupAccess">
        </select>
    </td>
</tr>
Run Code Online (Sandbox Code Playgroud)

我在这里使用下面第一个响应中提供的手表示例创建了一个小提琴. http://jsfiddle.net/LHz9D/1/

angularjs ng-repeat ng-options

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

ng-repeat访问对象内部的数组

我有一个包含对象列表的数组.每个对象还包括一个数组(见下文).我正在使用ng-repeat来遍历每个对象的子数组,我尝试了许多不同的方法,但它根本不起作用.任何提示,方向,帮助将非常感激.谢谢.:-)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
    angular.module('mlApp', [])
       .controller('mlCtrl', [function () {
          var self = this;
          self.contacts = [
            { contact: 'AAA', mlist: [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1] },
            { contact: 'BBB', mlist: [0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1,1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1] }

          ];
 } ]);

<div ng-app="mlApp" ng-controller="mlCtrl as mCtrl"> …
Run Code Online (Sandbox Code Playgroud)

angularjs ng-repeat

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

angularjs ng-repeat过滤器不等于

当我尝试使用以下语法时,它不会过滤或不排除: -

ng-repeat = "option in vm.eesSettingIdOptions | filter : { SettingID: '!vm.eesAdminSetupData.SettingID'}
Run Code Online (Sandbox Code Playgroud)

但是当我将其更改为: -

ng-repeat = "option in vm.eesSettingIdOptions | filter : { SettingID: '!51'}
Run Code Online (Sandbox Code Playgroud)

他们应该是一样的不是吗?

html filter angularjs ng-repeat

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

ng-selected不能与ng-repeat一起使用来设置默认值

我正在尝试设置我使用select和ng-repeat的选项的默认值.我在js文件中获取数据,并且我调用模型来设置值.

请查看以下代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngrepeat-select-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
  <script src="app.js"></script>



</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select  ng-model="datamodel">
      <option ng-repeat="dataitem in data"
                ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{datamodel}}</tt><br/>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

app.js文件

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = [1,2,3,4,5];

    $scope.datamodel = 2;
 }]);
})(window.angular);
Run Code Online (Sandbox Code Playgroud)

这是我的傻瓜

angularjs ng-repeat

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

Angularjs:大于过滤ng-repeat

我正在对ng-repeat标签应用大于过滤器.我写了以下自定义过滤功能:

$scope.priceRangeFilter = function (location) {
    return location.price >= $scope.minPrice;
};
Run Code Online (Sandbox Code Playgroud)

我在以下HTML代码中使用它:

<div ng-repeat="m in map.markers | filter:priceRangeFilter">
Run Code Online (Sandbox Code Playgroud)

当$ scope.minPrice更新时,触发ng-repeat标记刷新的最佳方法是什么?

javascript angularjs ng-repeat angularjs-ng-repeat

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

AngularJS - 如果包含字符串,则删除ng-repeat项

我一直在清理我正在使用的外部JSON URL提要,并且我已经通过过滤器成功删除了不必要的特殊字符,如下所示:

angularJS.filter('removeChar', function(){
    return function(text) {
        text = text.replace(/\[[^\]]+\]/g, ''); // Characters inside Brackets
        return text.replace(/\;.*/, ''); // Characters after Colon
    };
});

<span ng-bind-html-unsafe="item | removeChar">{{item}}</span>
Run Code Online (Sandbox Code Playgroud)

但是,我现在想要实现的是 - 如果它通过我可以使用的过滤器包含特定字符串,则删除ng-repeat项.

例如:

<div ng-repeat="item in items | removeItem">{{item['flowers']}}</div>
Run Code Online (Sandbox Code Playgroud)

如果该项目包含"红色"或"绿色"字样

<div>Blue Roses</div>
<div>Red Roses</div>
<div>Orand and Green Roses</div>
<div>Yellow Roses</div>
<div>Red and Green Roses</div>
Run Code Online (Sandbox Code Playgroud)

只有这将通过过滤器的ng-repeat显示:

<div>Blue Roses</div>
<div>Yellow Roses</div>
Run Code Online (Sandbox Code Playgroud)

非常感谢帮助一个例子.

谢谢!鹏.

javascript replace filtering angularjs ng-repeat

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

使用angularjs中的ng-repeat访问嵌套数组

的jsfiddle

我无法访问嵌套集合中的数组图像.为什么我看不到任何输出?

该模型:

var obj = [{
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}, {
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}];
Run Code Online (Sandbox Code Playgroud)

这是带有ng-repeat的HTMl:

<ul>
    <li ng-repeat="img in item"> 
        <br /> 
        <li ng-repeat="img1 in img.images">{{img1}}</li>
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

任何人都能指出我错过的东西吗?

angularjs ng-repeat

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

Angularjs - 在tr ng-repeat中添加额外的行

Ng-repeat存在于表格行上

我的查询是如何实现以下目标:

<tr ng-repeat="x in y">
     Looping here....
 </tr>
Run Code Online (Sandbox Code Playgroud)

现在,当数据对象循环上<tr>.我有一个场景,我必须显示两行中的1行数据<tr>.

例如.

  • 数据1数据1.2数据1.3数据1.4
  • 数据2数据2.2
  • Data2b data2.3 data2.4
  • Data3数据3.2数据3.3数据3.4

  • Data4 data4.2 data4.3

即显示两行中的1行数据

不能使用ng-repeat-end

angularjs ng-repeat

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

使用angular来隐藏内部循环中的整个div?

<div id="whole-div" ng-hide="hideme">
  <div id="loop-div" ng-repeat="i in [1, 2, 3]">
    <button ng-click="hideme=true">Button {{i}}</button> 
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

以上是我现在的代码.我想要它,这样当你点击循环中的一个按钮(Button1,Button2,Button3)时,整个div都被隐藏了.但是,我发现当按钮在外面时,我只能隐藏整个div,如下所示......

<div id="whole-div" ng-hide="hideme">
  <div id="loop-div" ng-repeat="i in [1, 2, 3]">
    <button>Button {{i}}</button> </div>
  <button ng-click="hideme=true">Final Button</button>
</div>
Run Code Online (Sandbox Code Playgroud)

有没有办法使用循环div中的一个内部按钮隐藏整个div?提前致谢!

javascript jquery angularjs ng-repeat ng-show

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