Ⅰ 用angularjs里ng-repeat取到的數據怎麼篩選
兩種解決式: 式1:升級1.4.4版本該問題已經修復; 式2: ng-repeat遍歷象候先按照key排序……所建議json內容改數組某欄位作數組項屬性
Ⅱ angular filter 對數組過濾時,排除arr怎麼做
js:
$scope.arr = [
["212","上","下","左","右"],
["12","1","2","3","4"],
]
html:
<input type="text" ng-model="text">
<tr ng-repeat="dataTr in arr | filter:text">
<td ng-repeat="dataTd in dataTr">
<ng-switch on="$first">
<span ng-switch-when="true">{{index+1}}</span>
<span ng-switch-default>{{dataTd}}</span>
</ng-switch>
</td>
</tr>
Ⅲ AngularJS中如何去掉 ng-repeat的自動排序
JavaScript Object本身就不會保證key之間的排序 (EcmaScript 3 An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function)
但在目前的modern browsers,現實是這樣的:
……
嗯,先賣個關子,我們拿你的例子,來試一段代碼:
var alphaPrefixedRecords = {
"y2013": 'whatever',
"y2016": 'whatever',
"y2012": 'whatever'
};
var numAlphaRecords = {
"2013y": 'whatever',
"2016y": 'whatever',
"2012y": 'whatever'
};
var pureNumRecords = {
2013: 'whatever',
2016: 'whatever',
2012: 'whatever'
};
var numStringRecords = {
"2013": 'whatever',
"2016": 'whatever',
"2012": 'whatever'
};
var floatNumRecords = {
20.13: 'whatever',
20.16: 'whatever',
20.12: 'whatever'
};
var floatStringRecords = {
"20.13": 'whatever',
"20.16": 'whatever',
"20.12": 'whatever'
};
// insert all keys into an array based
// on the order of their definition
function iterateKey(obj) {
var key, i = 0;
var arr = [];
for (key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(key);
i = i + 1;
}
}
return arr;
}
console.log('fucked up by JS: ')
console.log('pure num keys: ', iterateKey(pureNumRecords));
console.log('num string keys: ', iterateKey(numStringRecords));
console.log('based on order of definition: ')
console.log('alpha prefixed keys: ', iterateKey(alphaPrefixedRecords));
console.log('num alpha keys: ', iterateKey(numAlphaRecords));
console.log('float num keys: ', iterateKey(floatNumRecords));
console.log('float string keys: ', iterateKey(floatStringRecords));
輸出:
fucked up by JS:
pure num keys: ["2012", "2013", "2016"]
num string keys: ["2012", "2013", "2016"]
based on order of definition:
alpha prefixed keys: ["y2013", "y2016", "y2012"]
num alpha keys: ["2013y", "2016y", "2012y"]
float num keys: ["20.13", "20.16", "20.12"]
float string keys: ["20.13", "20.16", "20.12"]
結論是什麼呢?
1. 對於類型是number或可轉換為整數number的string類型的key,for...in無論如何都會按照number的大小排序,這類似於數組的行為。
2. 對於alphanumerical string類型的key,for...in會按照定義object時的key順序排列。
Angular可能會做一些內部排序,但是你也看出來了,依靠object key實現排序的做法是不可靠的。即使你是JS ninja,寫出一段高深莫測的代碼,你以後自己看到了都會想我艹這什麼鬼。所以少年,對於你這種年份的use case,還是乖乖地改成數組,然後手動order吧。
Ⅳ angularJs的ng-switch-when怎麼在 ng-repeat中進行篩選
兩種解決式:
式1:升級1.4.4版本該問題已經修復;
式2:
ng-repeat遍歷象候先按照key排序……所建議json內容改數組某欄位作數組項屬性
Ⅳ angular中用ng-repeat創建的元素怎麼獲取其中某幾個
通過寫過濾器來獲取其中某幾個。
比如
<!DOCTYPEhtml><html><head><metacharset="utf-8"><scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><divng-app="myApp"ng-controller="namesCtrl"><p>輸入過濾:</p><p><inputtype="text"ng-model="test"></p><ul><ling-repeat="xinnames|filter:test|orderBy:'country'">{{(x.name|uppercase)+','+x.country}}</li></ul></div><scriptsrc="namesController.js"></script></body></html>
Ⅵ angular 過濾器一定要在ng-repeat裡面嗎
小寫過濾器
添加小寫的過濾器,使用管道符的表達式。在這里添加小寫過濾器專,以小寫字屬母列印學生姓名。
Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}
貨幣濾波器
加幣過濾器使用管道符返回數的表達式。在這里,我們添加了過濾器,貨幣使用貨幣格式的列印費用。
Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}
Ⅶ AngularJS中如何去掉 ng-repeat的自動排序
$scope.records={
"2013":[
{order_year:"2013",order_date:"3-5",order_number:"A123445678",mileage:20000,sname:"華盛汽車"},
{order_year:"2013",order_date:"6-5",order_number:"A123445678",mileage:28000,sname:"華盛汽車"},
{order_year:"2013",order_date:"3-25",order_number:"A123445678",mileage:16000,sname:"華盛汽車"}
],
"2016":[
{order_year:"2016",order_date:"3-25",order_number:"A123445678",mileage:14000,sname:"華盛汽車"}
],
"2012":[
{order_year:"2012",order_date:"3-25",order_number:"A123445678",mileage:14000,sname:"華盛汽車"}
]};
$scope.keys=Object.keys($scope.records);
<divng-repeat="keyinkeys">
{{records[key]}}
</div>
Ⅷ 如何在ng-repeat遍歷的元素中動態設置樣式
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="isAgreen"/>同意?
<script>
var app=angular.mole('myApp',['ng']);
app.controller("myCtrl",function($scope){
$scope.$watch("isAgreen",function(){
console.log($scope.isAgreen);
});
});
</script>
</body>
</html>
<img src="http://img.blog.csdn.net/20161103195723492?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>
這段代碼是在沒數據的時候可以直接在控制台列印出true或false。
[html] view plain
<span style="color:#006600;"><!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<table>
<thead>
<tr>
<th>請選擇</th>
<th>姓名</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<span style="color:#FF0000;"><tr ng-repeat="obj in data">
<td><input type="checkbox" ng-model="isAgreen" />同意?</td></span>
<td>{{obj.name}}</td>
<td>{{obj.age}}</td>
<td>{{$index}}</td>
</tr>
</tbody>
</table>
Ⅸ angularjs ng-repeat可以含有表達式嗎
angularjs ng-repeat可以含有表達式track by.
<div ng-repeat="links in slides">
<div ng-repeat="link in links track by $index">{{link.name}}</div>
</div>
Error: [ngRepeat:pes]這個出錯提示具體到題主的情況,意思是指數組中有2個以上的相同數字。ngRepeat不允許collection中存在兩個相同Id的對象
For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.
對於數字對象來說,它的id就是它自身的值,因此,數組中是不允許存在兩個相同的數字的。
為了規避這個錯誤,需要定義自己的track by表達式。
例如:item
in items track by item.id或者item in items track by fnCustomId(item)。
也可以,直接拿循環的索引變數$index來用item。