AngularJS如何在页面加载时选择和初始化函数

时间:2021-07-27 19:41:46

In AngularJS

在AngularJS中

Objective: How can I get All Categories (button) To be highlighted and initialised on page load or refresh (e.g. possibly using ng-init or ng-options)

目标:如何获取所有类别(按钮)在页面加载或刷新时突出显示和初始化(例如可能使用ng-init或ng-options)

Controller

调节器

$scope.selectCategory = function(newCategory) {
  $scope.bottomValue = newCategory;
  selectedCategory = newCategory;
  $scope.selectedPage = 1;

}

$scope.categoryFilterFn = function(product) {
  return selectedCategory == null ||
    product.category == selectedCategory;
}

$scope.getCategoryClass = function(category) {
  return selectedCategory == category ? productListActiveClass : "";

}

$scope.getCategory = function(category) {
  return categorySelected == category;

}

HTML

HTML

<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg" style="margin-bottom:6px">All Categories</a>



<a ng-repeat="item in data.products | filter:{edition:    data.editions[whichEdition].name}| filter:approved=true |  orderBy:itemOrder:direction | orderBy:'-category' | unique:'category' " ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
ng-class="getCategoryClass(item)">
                {{item}}
</a>

4 个解决方案

#1


2  

I prefer using init function in controller rather than ng-init as init function is called before ng-init and I have everything ready to render. In your view controller.

我更喜欢在控制器而不是ng-init中使用init函数,因为在ng-init之前调用init函数并且我已准备好渲染所有内容。在您的视图控制器中。

 $scope.init = function () {
//init fields and object
}
...
$scope.init();

#2


2  

So whatever you want to do on page load , write a method in a single method like $scope.init and use call it like

所以无论你想在页面加载上做什么,都可以在像$ scope.init这样的单个方法中编写一个方法,并使用它调用它

<div ng-controller="controllerName" ng-init="init()">

this is , if you want to do everything on page load.

这是,如果你想在页面加载上做所有事情。

#3


0  

Use anguls's $window.onLoad.

使用anguls的$ window.onLoad。

$window.onload = function(param) {
  //your code here
  alert(param);
}

Or you can use ng-init directive with ng-controller -

或者您可以将ng-init指令与ng-controller一起使用 -

<div ng-controller="yourController" ng-init="yourMethod(param)">

Here is yourController -

这是你的控制器 -

var app = angular.module('DemoApp', [])
app.controller('yourController', function($scope) {
  $scope.yourMethod = function(param) {
    alert(param.toString());
  }
});

#4


0  

Can use Yauza said or you also can use ,,,,

可以用Yauza说或者你也可以使用,,,,

loadAllFunction() function loadAllFunction(){ //Your code }

loadAllFunction()函数loadAllFunction(){//你的代码}

#1


2  

I prefer using init function in controller rather than ng-init as init function is called before ng-init and I have everything ready to render. In your view controller.

我更喜欢在控制器而不是ng-init中使用init函数,因为在ng-init之前调用init函数并且我已准备好渲染所有内容。在您的视图控制器中。

 $scope.init = function () {
//init fields and object
}
...
$scope.init();

#2


2  

So whatever you want to do on page load , write a method in a single method like $scope.init and use call it like

所以无论你想在页面加载上做什么,都可以在像$ scope.init这样的单个方法中编写一个方法,并使用它调用它

<div ng-controller="controllerName" ng-init="init()">

this is , if you want to do everything on page load.

这是,如果你想在页面加载上做所有事情。

#3


0  

Use anguls's $window.onLoad.

使用anguls的$ window.onLoad。

$window.onload = function(param) {
  //your code here
  alert(param);
}

Or you can use ng-init directive with ng-controller -

或者您可以将ng-init指令与ng-controller一起使用 -

<div ng-controller="yourController" ng-init="yourMethod(param)">

Here is yourController -

这是你的控制器 -

var app = angular.module('DemoApp', [])
app.controller('yourController', function($scope) {
  $scope.yourMethod = function(param) {
    alert(param.toString());
  }
});

#4


0  

Can use Yauza said or you also can use ,,,,

可以用Yauza说或者你也可以使用,,,,

loadAllFunction() function loadAllFunction(){ //Your code }

loadAllFunction()函数loadAllFunction(){//你的代码}