我有一个HTML表格.
计算行数(通过使用$ index),仅显示某些行(通过使用ng-show).
问题:$ index没有返回正确的计数.该表的计数应该像"1,2,3 ......",但事实并非如此.
<tbody>
<tr ng-repeat="fruit in basket" ng-show="fruit.isJuicy == type">
<td>{{$index + 1}}</td>
<td>{{fruit.Name}}</td>
</tr>
</tbody>
这是JSFiddle ; 别忘了点击按钮查看问题:http: //jsfiddle.net/f6HCX/2/
是什么导致了这个计数问题？怎么解决？
(请你评论/评价我的问题的描述清晰度,(容易理解吗？)欢呼!)
编辑:这个问题已经回答了.使用过滤器的更多信息:如何在AngularJS中使用过滤器中的参数？
我有一个复选框(绑定到模型),放在一个ng-repeat迭代列表的标签内.
我想发送一个值"YES"或"NO",具体取决于是否使用ng-true-value和ng-false-value属性检查控制框.
但由于某种原因,$scope.value2控制器中没有更新.
这是一个jsFiddle与我的问题:: http://jsfiddle.net/HmvgW/
注意:如果我将复选框放在ng-repeat标记之外,则YES/NO值会正确发送到控制器.
如果将值放在ng-repeat标记内,如何将复选框单击值发送给控制器？
谢谢!
所以我在ng-repeat中有一个ng-repeat.内部ng-repeat引用"recipe.ingredients中的项目".问题是这些"项目"中的每一个都有特殊字符,除非我使用ng-bind-html,否则它们不会呈现.但是当我尝试使用ng-bind-html时,它不起作用.这是html:
这有效但不能正确显示特殊字符(成分测量的分数):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients">{{item}}</p>
</div>
</div>
</div>
我尝试使用ng-bind-html(这不起作用):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item"></p>
</div>
</div>
</div>
ng-repeat中"item"的示例:
{
id: 1,
img: "images/beefThumbnail.jpg",
title: "Potatoes Supreme",
servings: "Servings: 8 - 10",
ingredients: [
"6 medium potatoes, peeled",
"Salt",
"½ cup butter or margarine, …使用AngularJS v1.3.15
我得到一个奇怪的语法错误:
http://errors.angularjs.org/1.3.15/ngRepeat/iexp?p0=item%20asNaNtems
这是我的模板(templateUrl):
<div class="context-menu" ng-if="showMenu">
<div class="context-menu-item" ng-repeat="item as items" ng-class="{disabled: item.isDisabled()}">
<a href="" ng-click="fire(item)">
<i class="fa" ng-class="item.getIcon()"></i> {{item.getName()}}
</a>
</div>
</div>
该指令以该指令$scope.items = []的控制器函数中的a开头:
angular.module('app').directive('atContextMenu', [
function() {
return {
'templateUrl': '...',
'controller': function($scope, $element) {
$scope.items = [];
}
};
}
]);
这是我的JSON数据:
"multipleLayerDropdown" : [
{"title":"Google","url":"#"},
{"title":"Another action","url":"#"},
{"title":"Something else here","url":"#"},
{"title":"More options", "submenu":[
{"title":"Second Level 1","url":"#"},
{"title":"Second Level 2","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]},
{"title":"Second Level 3","url":"#"},
{"title":"Second Level 4","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]}
]}
]
我希望如下:
上面的示例仅显示3个嵌套级别.如果嵌套数据大于3,则也会显示.例如,如果嵌套的JSON数据为5,则将显示其中的5个.任何人都知道如何显示所有嵌套的JSON数据(使用ng-repeat /任何其他angularjs方法)？
是否有任何选项显示不同的glyphicon图标取决于项目标题,事情是JSON菜单列表可能会有所不同
演示http://codepen.io/anon/pen/doZZgp
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.menuList = [
{page: "dashboard", title: "Dashboard"},
{page: "ui", title: "UI"},
{page: "expense", title: "Expenses"},
{page: "invoice", title: "Invoice"},
{page: "recur", title: "Reccurring Bills"},
{page: "profile", title: "My Profile"},
{page: "settings", title: "Settings"},
{page: "login", title: "Login"},
{page: "phonebook", title: "Phone book"}
]
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
<ul class="nav">
<li ng-repeat="menu in menuList"><a href="#{{menu.page}}"><span class="glyphicon glyphicon-book"></span> {{menu.title}}</a>
</li>
</ul>
</div>angularjs glyphicons ng-repeat angularjs-ng-repeat twitter-bootstrap-3
我正在弄清楚如何通过ng-repeat单击按钮来保存输入文本框中输入的值.我已经看到这样的示例从文本框中获取值,用户可以单独保存每个文本框.以下是示例代码:
$scope.items=[1,2,3,4]
<div ng-repeat="item in items">
<input type="text" ng-model=item.id>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
自从我扩展我的项目后,我偶然发现了一个问题.这是我的主要目标:
{
screens: [{
id: 0,
name: 'Screen0',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 1,
name: 'Screen1',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}, {
id: 2,
name: 'Screen2',
sections: [{
id: 0,
sectionItems: []
}, {
id: 1,
sectionItems: []
}, {
id: 2,
sectionItems: []
}]
}]
};
问题出现在以这种方式填充的select标记中: …
我看到使用带有ng-repeat angular指令的socket.io的一些性能问题,我从后端接收了大量数据,这会减慢应用程序的速度,因此在接收数据时我将无法点击任何内容.使用ng-repeat处理大型列表的最佳方法是什么,我们假设每分钟有1000条消息？
ctrl.js
$scope.event = [];
socket.on('ditConsumer', function(data) {
var obj = {
file: $scope.filename,
data: data
}
$scope.event.push(data);
}
main.html中
<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
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>
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', …angularjs ng-repeat angularjs-ng-repeat angularjs-ng-options
angularjs ×10
ng-repeat ×10
javascript ×4
html ×2
checkbox ×1
glyphicons ×1
indexing ×1
json ×1
ng-bind-html ×1
ng-show ×1
performance ×1