2
정렬에 따라 화살표 아이콘을 표시하거나 숨기려고합니다. 나는각 .js로 정렬하여 화살표 아이콘 표시 및 숨기기
VAR MyApp를 = angular.module 정렬 부트 스트랩
<div ng-controller="PurchasesCtrl">
<h2>Purchases:</h2>
<table class="table">
<thead>
<tr >
<th ng-click="changeSorting('username')" >UserName <span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span></th>
<th ng-click="changeSorting('usertype')">UserType</th>
<th ng-click="changeSorting('age')" >Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="purchase in purchases.data|orderBy:sort.column:sort.descending">
<td >{{purchase.username}}</td>
<td>{{purchase.usertype}}</td>
<td>{{purchase.age}}</td>
</tr>
</tbody>
</table>
</div>
각도 JS를 사용하고 도와주세요 각도 JS에 새로운 오전 ("을 myApp", []) ;
myApp.factory("Purchases", function(){
var Purchases = {};
Purchases.data = [
{
username: "suraj kumar gosi",
usertype: "sponer",
age: "20"
},
{
username: "kao kumar gosi",
usertype: "clinet",
age: "26"
},
{
username: "surdfsdfaj kumar gosi",
usertype: "clinfsdfset",
age: "50"
}
];
return Purchases;
});
function PurchasesCtrl($scope, Purchases){
$scope.purchases = Purchases;
$scope.sort = {
column: '',
descending: false
};
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
}
여기를 클릭하십시오. 미리 감사드립니다.
덕분에 당신은하지만 난 <일 = "changeSorting ('이름')"NG 클릭> 사용자 이름을 <스팬 클래스를 추가하고 = "glyphicon-chevron-down":! sort.descending} "> UserType 연령 다음은 서로 효과가 있습니다. 한 번만 움직이기를 원합니다. –
Surajghosi
+0
+0
0
관련 문제
-
1. AngularJS - 글리프콘이있는 화살표 아이콘 표시 및 숨기기
-
2. JS로 팝업 표시/숨기기
-
3. 숨기기/표시 선택 화살표
-
4. jquery 모바일, 목록, 화살표 아이콘 숨기기
-
5. 작업 표시 줄 숨기기 아이콘
-
6. Enterprise Architect 빠른 LInker 화살표 숨기기/표시
-
7. 자동 화살표 아이콘
-
8. Jquery 토글() - 상태 표시/숨기기 감지 및 화살표 추가
-
9. 콤보 숨기기 화살표
-
10. 작업 표시 줄에서 응용 프로그램 아이콘 숨기기
-
11. JS로 요소의 텍스트 숨기기
-
12. MKMapView의 화살표 아이콘
-
13. Eclipse - 검색 화살표 아이콘
-
14. 안드로이드, 쇼 화살표 아이콘
-
15. Eclipse 제거 화살표 아이콘
-
16. ExtJS getClass() 동적으로 아이콘 숨기기/표시
-
17. div 표시 및 숨기기
-
18. Chrome 확장 프로그램 : 브라우저 작업 아이콘 숨기기 및 표시
-
19. 아이콘 및 기타 상태 표시 줄 안드로이드 숨기기
-
20. 호버시 "닫기"아이콘 표시
-
21. JS로 카운터 변수 표시
-
22. javascript의 닫기 아이콘 숨기기/숨기기
-
23. 범위 숨기기 및 표시
-
24. Gtk.TextView 표시 및 숨기기
-
25. 숨기기 및 표시 필드
-
26. RadComboBox 숨기기 및 표시
-
27. div 표시 및 숨기기
-
28. 탭 표시 및 숨기기
-
29. 숨기기 및 표시 사업부
-
30. div 표시 및 숨기기
최근 질문
-
1. html 축소를 어떻게 멈출 수 있습니까?
-
2. Mongoose에 시드 된 데이터가 MongoDB에 저장되지 않았습니다.
-
3. golang은 템플릿을 내장하여 구조체를 초기화합니다. 구조체 초기화 프로그램에서 값이 너무 적음
-
4. mysql을 주문순으로 주문 하시겠습니까?
-
5. Awk - 열 1 (테이블간에 공통)의 일치하는 데이터를 기반으로 표 2의 coumn 2에서 표 1의 coumn 2를 바꿉니다.
-
6. 활동 코드
-
7. org.json.JSONException : 데이터에 대한 값이 없습니다
-
8. 오버플로 아래에 요소 표시 : 숨김
-
9. height = "100 %"는 <object>에서 작동하지만 <img>으로는 작동하지 않습니다. 차이 HTML 대 CSS 너비/높이 속성?
-
10. dereference를 사용하여 C++ 바이너리 검색 트리
-
1. AngularJS - 글리프콘이있는 화살표 아이콘 표시 및 숨기기
-
2. JS로 팝업 표시/숨기기
-
3. 숨기기/표시 선택 화살표
-
4. jquery 모바일, 목록, 화살표 아이콘 숨기기
-
5. 작업 표시 줄 숨기기 아이콘
-
6. Enterprise Architect 빠른 LInker 화살표 숨기기/표시
-
7. 자동 화살표 아이콘
-
8. Jquery 토글() - 상태 표시/숨기기 감지 및 화살표 추가
-
9. 콤보 숨기기 화살표
-
10. 작업 표시 줄에서 응용 프로그램 아이콘 숨기기
죄송합니다. 무엇이 잘 모르겠습니다. 무엇을 해야할지 모르겠군요. 당신은 전혀 의미합니다 .. 당신은 문제가있는 jsFiddle 또는 codepen을 만들 수 있습니까? – azium
http://jsfiddle.net/js64b/873/ 하나의 파일을 클릭 한 다음 모든 화살표 아이콘을 이동할 때. 하지만 한 번에 하나의 아이콘 만 이동하고 싶습니다. 미리 감사드립니다. – Surajghosi
확인이 plunker : plunker to show icons on sorting
대신 추가 기능 아이콘을 변경하면 우리는 CSS와 기능을 사용할 수 있습니다 sort :`$ scope.reverse = false; $ scope.sortKey = '제목';
및 HTML은 다음과 같이
출처
2017-01-07 11:50:29
관련 문제