Question

尝试使用引导选项卡构建角度选项卡，并根据对象数据中提到的类别过滤内容。 Controller函数包含带有属性的javascript对象。我不知道哪里出错了？以下是我的代码：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

</head>

    <body ng-app="myApp">
         <div ng-controller="myCtrl as ctrl">

          <ul class="nav nav-tabs" role="tablist">
                   <li role="presentation" ng-class="{active:ctrl.isSelected(1)}">
                <a
                 aria-controls="all"
                 role="tab" ng-click="ctrl.select(1)">All</a></li>
                <li role="presentation" ng-class="{active:ctrl.isSelected(2)}">
                <a
                 aria-controls="ui"
                 role="tab" ng-click="ctrl.select(2)">UI</a></li>
                <li role="presentation" ng-class="{active:ctrl.isSelected(3)}">
                <a
                 aria-controls="backend"
                 role="tab" ng-click="ctrl.select(3)">Backend</a></li>
                <li role="presentation" ng-class="{active:ctrl.isSelected(4)}">
                <a
                 aria-controls="student"
                 role="tab" ng-click="ctrl.select(4)">Student</a></li>
            </ul>

    <div class="tab-content">
        <ul class="tab-pane fade in active">
            <li ng-repeat="dish in ctrl.dishes | filter:Ctrl.filtText">{{ dish.name + ', ' + dish.age + ', ' + dish.category +', ' +dish.job }}</li>
       </ul>


     </div>
   </div>
   <script>
      var app=angular.module('myApp',[]);
      app.controller('myCtrl',function(){
        this.filtText = '';
        this.tab=1;

       var dishes=[
          {
            name:'mit',
           age:'23',
           category:'Ui',
            job:'UI Developer'

         },
        {
            name:'Manu',
           age:'30',
           category:'backend',
            job:'SE'

           },
          {
          name:'Emily',
          age:'21',
          category:'student',
          job:'SE'

         },
          {
             name:'Ben',
             age:'27',
             category:'business',
              job:'UI Developer'

            }

          ];

        this.dishes = dishes;
        this.select = function(setTab) {
            this.tab = setTab;

            if (setTab === 2)
                this.filtText = "Ui";
            else if (setTab === 3)
                this.filtText = "backend";
            else if (setTab === 4)
                this.filtText = "student";
            else
                this.filtText = "";

        }
         this.isSelected = function (checkTab) {
            return (this.tab === checkTab);
        }

      });

      </script>

       </body>

Answer 1

您正在根据category进行过滤更新ng-repeat如下

注意：确保ctrl为小写。区分大小写

  <div class="tab-content">
    <ul class="tab-pane fade in active">
        <li ng-repeat="dish in ctrl.dishes | filter: {category: ctrl.filtText}">{{ dish.name + ', ' + dish.age + ', ' + dish.category +', ' +dish.job }}</li>
   </ul>

 </div>

带过滤器的角度标签不起作用

1 个答案: