The output of the Angular UI mask formatting is currently not defined

Hey everyone, I'm currently working with the Angular UI Mask directive. Specifically, I am using the filter for hours '99:99'.

My approach involves grabbing the ng-model of the input box, converting it to a string, looping through the string, and adding a colon ":" after the second position before returning the formatted string. However, despite my efforts, the result returned from the function seems correct to some extent.

For example, if I enter 1212 in the input box, due to the UI mask, it will display as 12:12 in the box. But when I call the function, it returns as 12:12undefined... Can anyone assist me with this issue?

Check out my JSFiddle

Here's the code snippet:

<div ng-controller="MyCtrl">
    <input type="text" ui-mask="'99:99'" ng-model="time">{{ time }}
    <br>{{ convert(time) }}
</div>

JS file:

function MyCtrl($scope) {
    $scope.time = '';

    $scope.convert = function (input) {
        var str = input + '';
        var counter = 0;
        var newStr = '';

        while (counter <= str.length) {
            if (counter === 2) 
               newStr += ':';
            newStr += str[counter];
            counter++;
        }

    return newStr;
}

Answer №1

Your code appears to have a small issue within the convert function. To simplify it, consider using a basic for loop.

I've made some improvements to your code snippet here

Below is the revised version of the code:

$scope.convert = function(str){
    if(!str) return;
    var counter = 0,
        newStr = '',
        max = Math.min(str.length, 4);
    for(var i = 0; i < max; i++) {
        if(i === 2) newStr += ':';
        newStr += str[i];
    }        
    return newStr;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The backbutton event in Apache Cordova does not trigger on Windows Phone (universal) devices

Having created an Apache Cordova project for a single-page application, the start page features a list of items. Clicking on an item leads to navigating to the details page using window.navigate("#/details/" + id); Angular.js successfully displays the de ...

Utilizing identical ID values multiple times to link to the identical location

I am currently working on a horizontal grid project with 3 image squares. My goal is to create an action where clicking on any grid section will anchor the user down to a slideshow box displayed below the grid. Below is an example of one grid section and ...

JavaScript: The most efficient method for locating a Regular Expression within an Object's properties

Suppose I have a scenario where I need to validate if the words in an array exist in a dictionary and take certain actions accordingly. Here's a snippet of the code that achieves this: let dictionary = { aaa : 'value1', bbb : 'val ...

I am looking to develop a customizable table where the user can input their desired information

Looking to create an HTML page featuring a 10x10 table with alternating red and green squares. After loading the page, a pop-up window will prompt the user to input a word, which will then appear only in the red squares of the table. While I've succes ...

Create a PHP form that includes text and image inputs with the help of AdminLTE and integrates DropZone.js

I have been working with a template from adminLTE and you can check it out at the following link: . At this point, I am trying to upload images first and then use the image names as input text elements in my main form for submission. However, I have encou ...

Displaying nested objects within an object using React

Behold this interesting item: const [object, setObject] = useState ({ item1: "Greetings, World!", item2: "Salutations!", }); I aim to retrieve all the children from it. I have a snippet of code here, but for some reason, i ...

Leverage ngrepeat for iterating through a Set

One challenge I'm facing is working with the vm.s = new Set([1,2,3]) Is there a way to utilize ngRepeat on s without converting it to an array first? I've experimented with different approaches: <option ng-repeat="o in vm.s">{{o}}</op ...

Guide on displaying an EJS page with AngularJS on a Node.js server

Having an issue with rendering an ejs page through nodejs. The page works fine independently, but fails to load when rendered via nodejs. Any help would be appreciated. ejs page: <html> <script src="/home/aniruddha/Downloads/angular.js"></ ...

Property 'column_number_data' is inaccessible due to being undefined

Incorporating datatables.net along with the yadcf plugin in my angular application has been quite beneficial. The data is being loaded through an ajax request seamlessly on the initial page load. However, upon navigating to a different page and returning ...

Mounted class not initiating transition in Vue.js

After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...

Issue with AngularJS directive template not accepting function parameter

Exploring the world of AngularJS for the first time and I've encountered an issue with a directive I'm working on. I am trying to set the ng-click function in the template dynamically by passing in a function name, but it doesn't seem to be ...

Issue with Angular DataTable missing DTInstance when attempting to populate table

Has anyone encountered the problem of not having their DtInstance populated after rendering? <div ng-controller="InventoryTableController as vm"> <table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" ...

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

It appears that the current website utilizes asp.net web forms calling web api, but I am looking to convert it to Angular calling Web api. One thing I have noticed is that I need to clean up the data. How should I approach this? Should I use conditional ...

Creating a directive that dynamically expands templates for varying blocks of code based on different ng-repeat values

I have a snippet of code that I want to reuse across various HTML pages. The code in question is as follows: <h5>Brand</h5> <div> <div ng-repeat="brand in store.brands.tops"> <label> <input type="checkbox" ng-t ...

Tips on sorting items in React

Hey there, I'm a beginner at react and currently working on my first ecommerce website. My main concern is about filtering products by size. I'm struggling with the logic behind it. Any help or guidance would be greatly appreciated. I also attem ...

Explore a personalized color scheme within MUI themes to enhance your design

I'm looking to customize the colors in my theme for specific categories within my application. I set up a theme and am utilizing it in my component like this: theme.tsx import { createTheme, Theme } from '@mui/material/styles' import { red ...

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

I am new to nodejs, so I kindly ask for your understanding if my questions seem simple. I am attempting to use nodejs on a Raspberry Pi 3 to control two motors, and I keep encountering the error message "async task is not a function." Despite searching fo ...

When implementing jQuery $.ajax with Angular, the DOM fails to update

Based on the value retrieved from an XHR call to the server, I am looking to display different content: <div class="container"> <div class="header" ng-controller="MyController"> <div ng-switch on="myScopeVar"> <d ...

What methods can I implement to enhance the capabilities of my API when my response types are defined as interfaces?

My React application requires an extension method to be added on the Product type in order to make refactoring easier. This extension method should include boolean checks such as product.hasAbc() that references the attributes property. Currently, the API ...

Update a product on an admin dashboard for an eCommerce website project using Node.js alongside Express.js, HBS, and MongoDB

Edit Button <td> <a href="/admin/edit-product/{{this._id}}" class="btn btn-primary">edit</a> </td> Routing for the Edit Product Link var ProductHel ...