如何在JQuery Selector中調用遞歸函數

我有11個儀表板，我想顯示inOrder。所以我的HTML代碼如下所示：如何在JQuery Selector中調用遞歸函數

<button type="button" class="btn btn-default" ng-model="settings.isBigger" ng-disabled="false" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false" tooltip="{{settings.maximized ? 'Minimize in Order': 'Maximize in Order'}}" tooltip-placement="bottom"> 
    <i class="icon-resize-full-alt"></i> 
    </button>

最大化類：頁擴展。

$（「儀表盤」）中的.class jQuerySelectors（具有類=儀表盤的所有元素）

所以每個陳述應該採取3秒所以我用的setTimeout。

相同的過程將是連續的，所以我的功能必須是遞歸的。

//$(".dashboard").each(function (index) . This code my foreach loop in dashboards.

和我的NG-型號代碼如下所示：

link: function (scope, elem, attrs, controller) { 
    elem.on('$destroy', function() { 
     $log.log("I am here"); 
    }); 
    scope.$watch('settings.isBigger', function() { 
     $(".dashboard").each(function (index) { 
      function inOrder() { 
       $(this).addClass("maximize" + index) 
       setTimeout(function() { 
        $(this).removeClass("maximize" + index) 
        $(this).addClass("maximize" + index + 1) 
       }, 3000) 
      }; 
      return inOrder; 
     }) 
    }); 
}

我的代碼不能正常工作。你能幫我嗎？

來源

2016-04-15 eagle

作爲一般規則，因爲兩件事情采用了棱角分明的時候，你不應該需要使用jQuery：

角1嵌入jQlite這是jQuery的一個子集應該是足夠用於任何用途的情況。要使用它，只需替換$變量angular.element。

因此，例如$(".dashboard").each(...)將成爲angular.element('.dashboard').each(...)。這有助於減少頁面加載時間，因爲您不需要加載jQuery腳本。

有了angular，你不需要（你應該總是避免它）編寫代碼來操作DOM。你的html應該聲明地迴應模型的（範圍）變化。

因此，對於你的情況我想你有地方在你的範圍儀表板顯示，如清單：

$scope.dashboards = [ 
{name: 'Top Five cities'}, 
{name: 'Sales of the month'}, 
{name: 'Top 10 Product Categories'} 
];

你會再顯示它們沿着你最大限度地利用這一方式/最小化複選框：

<button ng-model="settings.isBigger" ...>Maximize/Minimize</button> 
<ul> 
    <li ng-repeat="dashboard in dashboards" ng-class="{'maximize': settings.maximizeDashboards}"> 
    {{dashboard.name}} 
    </li> 
</ul>

請注意我如何使用ng-class設置最大化css類。如果settings.maximizeDashboards == true，那麼css類將被添加，否則它將被刪除，因此您的儀表板將相應地變大或變小。

現在唯一剩下的就是爲settings.maximizeDashboards設置一個值。我可以在ng-class屬性中使用settings.isBigger，但是您的要求是在3秒後調整儀表板的大小，所以讓我們來做。在你的控制器，只需補充一點：

$scope.$watch(function() {return settings.isBigger;}, function(newValue) { 
    if(newValue) { 
    settings.maximizeDashboards = true; 
    $timeout(function() { 
     settings.isBigger = false;   
     settings.maximizeDashboards = false; 
    }, 3000) 
    } 
});

在這種情況下，控制器確實後3，第二定背面的大小設置的邏輯和HTML通過移除「最大化」的CSS類迴應它。

來源

2016-04-15 07:10:56

但我不會ng-repeat，因爲我不使用儀表板名稱。所以我必須在我的控制器中使用ng-repeat代替foreach循環。 – eagle

你可以展示一個更完整的例子，你如何在HTML中呈現儀表板？ –

如何在JQuery Selector中調用遞歸函數

回答

相關問題