アングラーは商品選別機能を実現します。

一、demo機能分析
1、サービスでデータを作成し、ページを巡回して描画する
2、入力ボックスの入力値に基づいてフィールドクエリを行う
3、各列をクリックしてソート機能を実現します。
実現する
1.1データ定義とレンダリング
angglarはMVVMモードのフレームワークをより偏向しているので、そのcontrollerは薄く、中の業務ロジックも少ないので、serviceやFactoryなどのangurが提供するカスタムサービスに論理を書く方法を身につけるべきです。今回のデモはアングラーのサービス方法で商品データを登録して定義します。

angular.module("app",[])
.service("productData",function(){
  //  service       ，     factory     
  return [
    {
      id:1002,
      name:'HuaWei',
      quantity:200,
      price:4300
    },
    {
      id:2123,
      name:'iphone7',
      quantity:38,
      price:6300
    },
    {
      id:3001,
      name:'XiaoMi',
      quantity:3,
      price:2800
    },
    {
      id:4145,
      name:'Oppo',
      quantity:37,
      price:2100
    },
    {
      id:5563,
      name:'Vivo',
      quantity:23,
      price:2100
    }
  ]
})
//   service   productData    
.controller("myCtrl",function($scope,productData){
  $scope.data=productData; //      

  $scope.order=''; //     ，    
  $scope.changeOrder=function(type){
    $scope.orderType=type;
    if($scope.order===''){
      $scope.order='-';
    }else{
      $scope.order='';
    }
  }
})

データレンダリング部分:

<table class="table">
      <thead>
      <tr>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">    <span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">    <span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">    <span class="caret"></span></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.price}}</td>
      </tr>
      </tbody>

    </table>

説明：上記のbootstrapのcaret類名を利用して三角記号を表示し、父要素にdropupを加えることによって三角記号を向きます。
1、三角記号の転向はng-class命令によって決定され、式に入ってきました。order===''の時、trueの場合、thにdropupクラス名を付けます。
2、ng-clickコマンドでイベントをバインドし、クリックすると並べ替え方式を切り替えることを実現する。
2.2検索機能
angglarのfilterフィルタを使って入力フィールドを検索します。

<!--     ng-model     -->
   ：<input type="text" ng-model="search">
 <!--  filter:{id:search}   id     ， search       -->
 <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.price}}</td>
      </tr>

2.3ソート機能
1、order属性を定義して、正順か逆順かを設定します。
2、order Type属性を定義して参照並べ替えの値を設定します。
3、changeOrder（）を定義する方法はクリックで並べ替え機能を実現するために使用されます。

 $scope.order=''; // order ‘'   
 $scope.changeOrder=function(type){ //     ，       
   $scope.orderType=type;
   if($scope.order===''){
     $scope.order='-'; //order '-' ，  
   }else{
     $scope.order='';
   }
 }

ページの中で：changeOrder（）関数はパラメータとして「タイプ」に入ってきて、関数の内部で「scope.ordersType=type」を通します。並べ替えの参考タイプを設定します。

<table class="table">
      <thead>
      <tr>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">    <span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">    <span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">    <span class="caret"></span></th>
      </tr>
      </thead>
      <tbody>
        <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType">
          <td>{{value.id}}</td>
          <td>{{value.name}}</td>
          <td>{{value.price}}</td>
        </tr>
      </tbody>
    </table>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。