Question

我试图动态生成导航标签。

此代码有效：

<ul class="nav nav-tabs" role="tablist">
     <li role="presentation" ng-class="{active:isSelected(1)}">
           <a ng-click="select(1)" aria-controls="all menu"role="tab">The Menu</a></li>
     <li role="presentation" ng-class="{active:isSelected(2)}">
           <a ng-click="select(2)" aria-controls="appetizers" role="tab">Appetizers</a></li>
     <li role="presentation" ng-class="{active:isSelected(3)}">
            <a ng-click="select(3)" aria-controls="mains" role="tab">Mains</a></li>
      <li role="presentation" ng-class="{active:isSelected(4)}">
            <a  ng-click="select(4)" aria-controls="desserts" role="tab">Desserts</a></li>
  </ul>

               <div class="tab-content">
               <ul class="media-list tab-pane fade in active">
                <li class="media" ng-repeat="dish in dishes | filter:filtText">
                    <div class="media-left media-middle">
                        <a ui-sref="app.dishdetails({id: dish._id})">
                        <img class="media-object img-thumbnail"
                        ng-src={{dish.image}} alt="Uthappizza">
                        </a>
                    </div>
                    <div class="media-body">
                        <h2 class="media-heading">{{dish.name}}
                        <span class="label label-danger label-xs">{{dish.label}}</span>
                        <span class="badge">{{dish.price/100 | currency}}</span></h2>
                        <p ng-show="showDetails">{{dish.description}}</p>
                         <button  ng-show="showFavorites" ng-click="addToFavorites(dish._id)" class="btn btn-xs btn-default pull-right"
                    type="button">
                          <i class="fa fa-heart"></i>
                        </button>
                    </div>
                </li>
            </ul>

            </div>

按照Menucontroller中的jscode：

  menuFactory.query(
        function (response) {
            $scope.dishes = response;
            $scope.showMenu = true;

        },
        function (response) {
            $scope.message = "Error: " + response.status + " " + response.statusText;
        });

    $scope.select = function (setTab) {
        $scope.tab = setTab;

        if (setTab === 2) {
            $scope.filtText = "appetizer";
        } else if (setTab === 3) {
            $scope.filtText = "mains";
        } else if (setTab === 4) {
            $scope.filtText = "dessert";
        } else {
            $scope.filtText = "";
        }
    };

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

这里的代码是ng-repeat：

<ul class="nav nav-tabs" role="tablist">
<li ng-repeat="category in categories" role="presentation" ng-class="{active:isSelected(category)}">
<a ng-click="select(category)" aria-controls="category" role="tab">{{category}}</a>
</li>
</ul>

这里是控制器中的新jscode：

 $scope.categories = ["all menu","appetizers","mains","desserts"];

    $scope.select = function (setTab) {
        $scope.tab = setTab;

        if (setTab === "all menu") {
            $scope.filtText = "";
        } else {
            $scope.filtText = setTab;
        }
    };



    $scope.isSelected  = function (category){
       $scope.currentCategory = category;  
    };

当我尝试使用ng-repeat时，导航中的链接无法正常工作。以前，我忘了替换字符串的数字（$ scope.isSelected = function（checkTab）{return（$ scope.tab === checkTab）;};函数select现在正在调用。我想将这些项目放在一个数组中，并从类别列表中动态生成导航。最后我替换$ scope.filtText =＆＃34; setTab＆＃34;到$ scope.filtText = setTab，现在filtText工作正常。

谢谢！

导航选项卡中的角度ng-repeat不起作用

0 个答案: