Renaming properties in an AngularJS model

After receiving the data in a structured format, my task is to present it on a graph using radio buttons. Each radio button should display the corresponding category name, but I actually need each button to show a custom label instead of the original category name from the data. For instance, if the category name is false, the radio button should display "Other", and if it's true, then it should display "Our Company".

0: Object
    categoryName: false
    categories: Array[4]
        0: Object
        1: Object
        2: Object
        3: Object
1: Object
    categoryName: true
    categories: Array[2]
        0: Object
        1: Object

<span ng-repeat="testCat in testCategories">
<input type="radio" name="programSelector2" ng-model="testCategoryId" ng-click="load( testCat.id )" value="{{testCat.id}}" >{{testCat.name}}
</span>

I require assistance with implementing controller logic that will update the model according to the categoryName provided.

javascriptarraysangularjsdatamodel

Answer №1

You have three paths you can take:

  • develop a function to determine the value
  • construct an array to figure out the value
  • utilize a condition within the expression

Using resolvement function:

$scope.resolve = function(key) {
    if (key == 'firstValue') {
        return 'First description';
    } else if (key == 'secondValue') {
        return 'Second description;
    }
}

and in the HTML

{{resolve(testCat.categoryName)}}

With array

$scope.resolve = [];
$scope.resolve['firstValue'] = 'First description;
$scope.resolve['secondValue'] = 'Second description;

and in the HTML

{{resolve[testCat.categoryName]}}

Utilizing conditional expression

In case categoryName only contains true or false values

 {{ testCat.categoryName ? 'First description' : 'Second description' }}

Answer №2

To implement this functionality, start by setting up a new function in the controller:

scope.getCategoryName = function(categoryName) {
   if (categoryName === true)
     return 'Other';
   else 
   {
     // your code here
   }
}

Next, you can call this function from your HTML code like so:

<input type="radio" name="programSelector2" ng-model="testCategoryId" ng-click="load(testCat.id)" value="{{testCat.id}}" >{{getCategoryName(testCat.name)}}

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

Is using parameterized routes in Node.js a recommended practice or a mistake?

Here is the code snippet I'm working on: router.delete('/delete-:object', function(req, res) { var query; var id = req.body.id; switch (req.params.object) { case 'news' : query = queries['news_del ...

javascriptnode.jsexpress

What is the process for rendering a React class component using React HashRouter and Apollo client?

I've run into an issue with my project that involves using only React class components and fetching data from an Apollo server. The problem I'm facing is that, in Chrome, only the Navbar.jsx component is rendering. Even when I navigate to one o ...

javascriptreactjsreact-router-domapollo-clientreact-class-based-component

Ways to temporarily eliminate elements from a Swift array?

New to Swift and seeking guidance on a programming dilemma... Currently, my program displays strings from an array on the screen using Xcode. I want to prevent the user from getting the same string twice in a row when they press a button. My approach in ...

iosarraysswiftswift2

What is the best way to halt a window.setInterval function in JavaScript?

I have a JavaScript function that runs every 2000ms. I need to find a way to pause this function so that the user can interact with other elements on the page without interruptions. Is there a way to achieve this? Below is the code for the function: win ...

javascriptjquery

Utilizing the same uuid twice along with Vuex and the unique identifier generation tool uuidv4

Within my vuex store, there is a function to create a post. This function generates a json Object containing a unique uuid using uuidv4(). However, I have noticed that if I execute the function multiple times, the uuid remains the same each time (unless I ...

javascriptvue.jsvuejs2vuexuuid

Incorrect data for minimal values within Google charts

Currently, I am utilizing a Google chart found at the following link: In my data set, I have significantly high values for the line chart and relatively low values for the bar chart. In order to make both types of data more easily readable, I would like t ...

javascripthtmlgoogle-visualization

Generate a dynamic jqplot chart using data retrieved from a variable and JSON data

I'm struggling with loading data into a jqplot chart via variables as it only displays the first value. I am puzzled as to why this is happening. JavaScript: $(document).ready(function () { var sin = [[20, 10, 0, 10, 15, 25, 35, 50, 48, ...

javascriptjqueryjsonjqplot

Encountering a 401 Error while trying to host an Angular app on Google Cloud Storage

I am currently facing an issue with deploying my Angular app to a Google Cloud Storage bucket. The bucket is public and set up to be served as a custom website via CNAME (test.example.com). The main page and 404 handler are mapped to index.html, but I am e ...

javascriptangulargoogle-cloud-storage

Discover the best practices for implementing MongoDB's latest Schema Validation functionality within your Express.js application

Need help implementing MongoDB's Schema Validation in an Express server? While working on a simple todo app, I opted for the native MongoClient over mongoose but still require a schema for my data. According to MongoDB's documentation available ...

javascriptnode.jsmongodbexpress

Is Window.navigator malfunctioning on different browsers in Mac OS?

I'm attempting to access the navigator function in my project to share a specific URL, but I'm facing difficulties accessing it on Mac OS when using browsers other than Safari. Is there a solution to this issue? Below is the function I created f ...

javascriptnext.jsnavigator

Using Blade to pass an array of arrays

I am facing an issue with passing an array of arrays from the controller to the view in Laravel. Despite conducting some research, I have not found any relevant topics to assist me with my problem. The tables involved are Shops, Items, and Items Price. Sho ...

phparrayslaravel

Implementing Dual Submit Buttons in Node.js using Express Framework

Struggling with implementing a like and dislike function in my node js app. Currently, I can only do one at a time. Below is the HTML code snippet: <form method="post" name="ratings"> <input type="submit" name="vote" value="like"> < ...

javascriptnode.jsexpresstypescript

How can jQuery incorporate additional selection criteria for a parent element?

How can I apply a specific criteria to a node that has been selected using jQuery? let objDIV = $("#selindividual").parent(); After retrieving the DIV, I want to target the following: button:contains(\"Submit\") If I had to do this in ...

javascriptjquery

validation using ajax and php

One question I have is, when I include document.getElementById('myPassword').value); in the validarDados function, it corresponds to valor. Then I need another variable, but valor1 isn't working as expected. The result of echoing $valor1; is ...

phpjavascriptajax

Enhancing data entry by using a dropdown menu to update the record value without adding any undefined data elements

Currently, I am working on enhancing a Location edit form that includes an API-fed dropdown list of Departments. The task involves utilizing the record's departmentId to preselect the current value in the dropdown menu. However, a complication arises ...

javascriptreactjsaxiosmaterial-ui

Loading images efficiently using JavaScript

While working on my JavaScript exercises, I encountered something strange with the image slider script I was creating. When trying to change the image source using the 'setAttribute' method in the HTML code, I noticed that the source of the imag ...

javascripthtmlimage

Are toggle functionalities triggered when an element is clicked?

How come the span triggers functions a and b when first clicked, is there a way to set it up so that it calls function a on the first click and then function b on the second click? function a(id) { $.post("url.php", {'id':id}, function() { ...

javascriptphpjquery

There appears to be an issue with the functionality of the external CSS pathway

placeholder image hereplaceholder image hereplaceholder image here I'm encountering a problem and struggling to identify the mistake in my current approach. ...

javascripthtmlcssnode.jsexpress

How can the .pre() middleware function in Mongoose be utilized?

I'm curious about the use cases for mongoose .pre('validate') and .pre('save'). I understand their functionality, but I'm struggling to think of specific scenarios where I would need to utilize them. Can't all necessary a ...

javascriptmongodbexpressmongoose

The concept of tweening camera.lookat in Three.js

Struggling to smoothly tween the camera.lookAt method in Three.js using Tween.js. The current implementation rotates the camera directly to the object's position. Here is the code snippet that sort of works: selectedHotspot = object; var tw ...

javascriptthree.jstween.js