How to Fix Error: ngRepeat:dupes Duplicate Key in Repeater in AngularJS

Error: ngRepeat:dupes Duplicate Key in Repeater is the most common problem we are facing when we work with AngularJS. Why does it happen? It’s happened when there is any duplicate key is exist in ngRepeat expression. By default, AngularJS uses keys to populate the dom elements. So if there is any duplicate key found in ngRepeat expression, then the error happens.

Example:

Now assume we have data like this format. Here 5 is the duplicate number. And when we try to use ngRepeat expression and we will get Error: ngRepeat:dupes Duplicate Key in Repeater.

$scope.numbers = [1, 2, 3, 4, 5, 5];
<p ng-repeat="number in numbers">
    {{ number }}
</p>

To fixed this problem you have to use track by $index with ng-repeat.

<p ng-repeat="number in numbers track by $index">
    {{ number }}
</p>

The problem will be solved after using track by $index with ng-repeat.

An invalid form control with name=” is not focusable?

Are you getting An invalid form control with name=” is not focusable message on your browser’s console log? Don’t be worried about this problem. Here is the quick fix for this issue.

First of all why it’s happened? It’s happened when you have some hidden fields with required true and these fields have no parent ‘form‘ element. In that case, this error might happen. Especially when you work on Jquery, AngularJS.

To fixed this issue you can just add ‘novalidate’ in your opening ‘form ‘ tag. Just like that <form action” novalidate>

Dynamic Page Title with AngularJS

Page title is the most common and important fact for a website as well as an application which influence the SEO score of a website. Generally, page title needs to change for each page depends on the page content. This article is for creating dynamic page title with AngularJS and ui-router.

At first, you need to download ui-router module and load in your application. Then configure your applications routes by using ui-router module.

Example of Dynamic Page Title with AngularJS:

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/')

    $stateProvider.state('home', {
        url: '/',
        templateUrl: 'home.html',
        data: {
            title: 'Home Page'
        }
    });

    $stateProvider.state('about', {
        url: '/about',
        templateUrl: 'about.html',
        data: {
            title: 'About Me'
        }
    });

    $stateProvider.state('blog', {
        url: '/blog',
        templateUrl: 'blog.html',
        data: {
            title: 'Personal Blog'
        }
    });

    $stateProvider.state('contact', {
        url: '/contact',
        templateUrl: 'contact.html',
        data: {
            title: 'Contact Me'
        }
    });
});

From the above code snippet, you can see I have configured my routing by using ui-router. According to ui-router I have used $stateProvider.state to create my individual route. And I added the title for each state which I will show into the browser.

app.run(['$rootScope', '$state',
        function ($rootScope, $state) {
            $rootScope.$on('$stateChangeSuccess', function () {
                $rootScope.title = $state.current.data.title;
            });
        }
    ]
);

And this snippet of code will execute while angular application will run. With the $rootScope.$on getting the successfully state changes ($stateChangeSuccess) and taking the each state’s title and assign into $rootScope.title.

And then modify your title tag to include ng-bind:

<title ng-bind="(title || 'Home') + ' - AngularJS Dynamic Title'">
   AngularJS Dynamic Title
</title>

This is really simple and easy way to set Dynamic Page Title with AngularJS. Here I have included a demo and source code link for you. Hope these will be helpful for you.

Demo Link: https://sohelrana820.github.io/dynamic-page-title-with-angular-js/#/

Source Code: https://github.com/sohelrana820/dynamic-page-title-with-angular-js

Prevent ng-model Changes Before Updating Form Data

By default when you write something in ng-model directive (in an input field) then the ng-modal value is automatically changed.

But if you want to make that changes happened after a task done. Then you need to modify this default behavior of ng-modal directive. To modify the default behavior of ng-modal directive you need to use ngModelOptions directive.

Prevent ng-model Changes Before Updating Form Data
Prevent ng-model Changes Before Updating Form Data

Prevent ng-model Changes Before Updating Form Data

ngModalOptions allows updateOn and debounce properties which tell when value need to change of ng-modal. updateOn property is for either value will change or not and debounce property is for delay time show to updated value.

See the sample code snippet

In this code snippet, you can see Name & Email will be changed and shown after updating these data (into the database). If any error or warning occurred when updating the value into the database then the value will not update and will not show the update value as well.

And also here I have cancelUpdate() method (with $rollbackViewValue) for canceling update user’s data. Suppose you write something then decide you will not update it. Then you have to click on ‘Cancel’ button. And $rollbackViewValue is responsive to revert ng-modal changes value

I hope you this article will help you to prevent ng-model changes before updating form Data with canceling update option.

Remove ngOptions Elements in AngularJS

With the passing time, AngularJS is getting popularity day by day. We all know AngularJS is the structured, most powerful and powerful front-end framework. But today I am not going to describe you about the AngularJS. But I am here to describe an easier & effective way to Remove ngOptions elements in AngularJS.

How to Remove ngOptions Elements in AngularJS

AngularJS provides a ng-options directive to display the options of selectlist. Here I use a categories array (array of object) for the selectlist. Every category object has (id, name, and is_active) keys and is_active true means Active category and is_active false means Inactive category.

Now, I want to display two selectlist, one if for active and another one for inactive. To do this I am using filter:{is_active: true} for active category’s selectlist and filter:{is_active: false} for inactive category’s selectlist.

With this filter, you can easily refine options base on your application needed. So developers can fell free to use is and make their code more maintainable and handy.

If you have any advice or query, please fell free to ask me.