AngularJs 학습일지 [7]: Filters

2724 단어
1. 포맷된 데이터는 통화 형식입니다.
<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="costController">

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>

<script>
function costController($scope) {
    $scope.quantity = 2;
    $scope.price = 9.99;
}
</script>

<script src="angular.min.js"></script>

</body>
</html>

3. 문자열을 모두 대문자로 변환합니다.
<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

<p>The name is {{ person.lastName | uppercase }}</p>

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>

<script src="angular.min.js"></script>

</body>
</html>

4. 표현식 규칙에 따라 배열을 정렬합니다.
<!DOCTYPE html>
<html>
<body>
	
<div ng-app="" ng-controller="namesController">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}
</script>

</body>
</html>

5, 하나의 배열에서 하위 집합을 선택합니다 (검색과 유사).
<!DOCTYPE html>
<html>
<body>


<div ng-app="" ng-controller="namesController">

<p><input type="text" ng-model="name"></p>

<ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}
</script>

</body>
</html>

좋은 웹페이지 즐겨찾기