Tag Archives: AngularJS

When using angularjs procedure, track by $index of NG repeat

When developing web applications, we often need to use ng repeat to traverse the array in $scope to update the list elements in the view
when the elements in our array are repeated, the browser will report such an error in the console

$scope.array=[1, 1, 1, 1, 2];
Error: [ngR epeat:dupes ]

Because angularjs forbids the repetition of elements in the array in ng repeat, we usually use track by $index to solve this problem

$scope.number=[1, 1, 1, 1, 2];

ng-repeat=”n in number track by $index”

The duplicate values here refer to the original values. If we use objects to represent them, there will be no errors. For example, the number object:

$scope.number=[new Number(2), new Number(2), new Number(2)];

String object:

$scope.number=[new String(2), new String(2), new String(2)];

Solve the problem of angularjs project startup error

1. But page error

Solution: NPM i ng flow — save dev

Note: it doesn’t have to be installed. It depends on the situation. The main thing is gulp = > All the things in the NPM folder need to be installed

2. Error: typeerror: require. Extensions. Hasownproperty is not a function 2

Solution: change the “require dir”: “^ 0.3.2” in the package.json file to this version

Reloading the current routing page using UI router in angularjs

Imagine such a scenario. We can enter an operation page through menu navigation. When some information has been entered or selected in the page, we find that it is not what we want at all, and we hope to quickly restore the initial state of the page. At this time, an ideal choice is to click the corresponding item in the menu bar again

If your menu is in this way, then click on the current menu, the page will not have any reaction

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}">
        <span ng-bind="m.name"></span>
    </a>
</li>

To find information, there are a lot of information prompts us to use the UI Sref opts command to set the reload parameter. Change the code to this way. Under the test, we will find that the current page is indeed refreshed, but the whole page is also refreshed

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:true}">
        <i ng-class="message.image"></i>
        <span ng-bind="message.menuCName"></span>
    </a>
</li>

In fact, the reload parameter can not only pass a Boolean parameter, but also accept string and object parameters. If we just want to refresh the current routing page without refreshing the parent route, we can set the value of the reload parameter to the string corresponding to the current route. The code is as follows:

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:'{{m.state}}'}">
        <i ng-class="message.image"></i>
        <span ng-bind="message.menuCName"></span>
    </a>
</li>

Of course, the above scenario is just a case. We will also use page refresh in the control logic of the program. The method is similar. A route can be skipped through $state.go, and this parameter can also be used for processing; Another way is to directly use $state.reload, call $state.reload() to load the whole page, and $state.reload (‘currentstate ‘) to load the current route. These are clearly explained in the comments of the source code

/**
 * @ngdoc function
 * @name ui.router.state.$state#reload
 * @methodOf ui.router.state.$state
 *
 * @description
 * A method that force reloads the current state. All resolves are re-resolved,
 * controllers reinstantiated, and events re-fired.
 *
 * @example
 * <pre>
 * var app angular.module('app', ['ui.router']);
 *
 * app.controller('ctrl', function ($scope, $state) {
 *   $scope.reload = function(){
 *     $state.reload();
 *   }
 * });
 * </pre>
 *
 * `reload()` is just an alias for:
 * <pre>
 * $state.transitionTo($state.current, $stateParams, { 
 *   reload: true, inherit: false, notify: true
 * });
 * </pre>
 *
 * @param {string=|object=} state - A state name or a state object, which is the root of the resolves to be re-resolved.
 * @example
 * <pre>
 * //assuming app application consists of 3 states: 'contacts', 'contacts.detail', 'contacts.detail.item' 
 * //and current state is 'contacts.detail.item'
 * var app angular.module('app', ['ui.router']);
 *
 * app.controller('ctrl', function ($scope, $state) {
 *   $scope.reload = function(){
 *     //will reload 'contact.detail' and 'contact.detail.item' states
 *     $state.reload('contact.detail');
 *   }
 * });
 * </pre>
 *
 * `reload()` is just an alias for:
 * <pre>
 * $state.transitionTo($state.current, $stateParams, { 
 *   reload: true, inherit: false, notify: true
 * });
 * </pre>

 * @returns {promise} A promise representing the state of the new transition. See
 * {@link ui.router.state.$state#methods_go $state.go}.
 */

in addition, it should be emphasized that the version of UI router you are using should be 0.2.14 or above, otherwise the whole page will still be refreshed, which seems to be a bug in the previous version

the suggestion of using version 0.2. X can be directly upgraded to 0.2.18