將html元素標識傳遞給ng級

我是Angular和ui路由器的初學者。我正試圖根據當前狀態名稱爲標題中的選項卡應用活動類。將html元素標識傳遞給ng級

<ul class="tabs"> 
     <li id="tab1" ng-class="navTabClass(this.id)"> 
      <a href="link1.html">Home 
      </a> 
     </li> 
     <li id="tab2" ng-class="navTabClass(this.id)"> 
      <a href="link2.html">Sales 
      </a> 
     </li> 
    </ul>

我已經在控制器中定義爲通過檢查的標籤ID和當前狀態名確定所述類中的函數（爲我的父視圖修剪出的名字之後）

`$scope.navTabClass = function(tabId) { 
          console.log(tabId); 
          var stateName = $state.current.name; 
          mainTab = stateName.split('.'); 
          return (mainTab[1] === tabId) ? 'active' : 'passive'; 
         }

我打印出來收到的tabId總是'未定義'。不用說，函數總是返回被動作爲類名稱

如何正確傳遞id值到受控函數？

來源

2014-11-06 Arun Stanislavose

您可以設置的jsfiddle或plunker複製的問題？ – SoluableNonagon 2014-11-06 22:08:11

你是否試圖從URL中的UI.Router參數訪問ID？ – DanR 2014-11-06 22:12:58

納克級的預期目標，所以

試試這個：

<ul class="tabs"> 
    <li id="tab1" ng-class="{'active': activeTab === 'tab1'}" ng-click="changeTab('tab1')"> 
     <a href="link1.html">Home 
     </a> 
    </li> 
    <li id="tab2" ng-class="{'active': activeTab === 'tab2'}" ng-click="changeTab('tab2')"> 
     <a href="link2.html">Sales 
     </a> 
    </li> 
</ul>

那麼你的JS是這樣的：

$scope.changeTab = function(tabName){ 
    $scope.activeTab = tabName; 
    console.log('tabName', tabName); 
}

這將翻轉你的標籤的狀態

來源

2014-11-06 22:12:42 SoluableNonagon

我正在尋找一個答案，如果我們通過更改URL來更改狀態（選項卡），這也將起作用。上述代碼僅在用戶點擊選項卡時纔有效。 – 2014-11-06 23:32:56

嗨，請看演示：

http://plnkr.co/edit/cyZPh5h1lIYykqrh8Igh?p=preview

可以使用ui-sref-active指令的詳細信息，你可以在這裏找到

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

<ul class="tabs"> 
    <li id="tab1" ui-sref-active="active"> 
     <a ui-sref="state1">State 1</a> 
    </li> 
    <li id="tab2" ui-sref-active="active"> 
     <a ui-sref="state2">State 2</a> 
    </li> 
    </ul>

來源

2014-11-06 22:24:24 sylwester

請看我對EliteOctagon的回答的評論 – 2014-11-06 23:33:30

將html元素標識傳遞給ng級

回答

相關問題