我很难理解如何在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)
提前致谢!
我试图简单地从下拉列表中获取先前的值和新选择的值.在此示例中,下拉列表预先填充了分配用户的当前组.
当下拉列表更改时,我希望能够返回旧值和新值.我已经可以获得旧值,但我不知道如何返回新值.
控制器代码:
// 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/
我有一个包含对象列表的数组.每个对象还包括一个数组(见下文).我正在使用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) 当我尝试使用以下语法时,它不会过滤或不排除: -
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)
他们应该是一样的不是吗?
我正在尝试设置我使用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)
这是我的傻瓜
我正在对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标记刷新的最佳方法是什么?
我一直在清理我正在使用的外部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)
非常感谢帮助一个例子.
谢谢!鹏.
我无法访问嵌套集合中的数组图像.为什么我看不到任何输出?
该模型:
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)
任何人都能指出我错过的东西吗?
Ng-repeat存在于表格行上
我的查询是如何实现以下目标:
<tr ng-repeat="x in y">
Looping here....
</tr>
Run Code Online (Sandbox Code Playgroud)
现在,当数据对象循环上<tr>.我有一个场景,我必须显示两行中的1行数据<tr>.
例如.
表
Data3数据3.2数据3.3数据3.4
Data4 data4.2 data4.3
即显示两行中的1行数据
不能使用ng-repeat-end
<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?提前致谢!
angularjs ×10
ng-repeat ×10
javascript ×3
filter ×1
filtering ×1
html ×1
jquery ×1
ng-options ×1
ng-show ×1
replace ×1