Renaming properties in an AngularJS model

Question

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.

javascript arrays angularjs datamodel

Answer 1

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

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 3

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)}}

Answer 4

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)}}

Renaming properties in an AngularJS model

Answer №1

Answer №2

Similar questions

The route param is throwing a "Cannot read property 'name' of undefined" error, indicating that the property

Troubleshooting JavaScript Oscilloscope: resolving audio playback problems

I am looking to obtain a value through a JavaScript function that sums values upon clicking. The result is satisfactory, but I am seeking a way to limit the value

Guide to fetching and displaying a complex array API using JavaScript's fetch method

In what way does s% access the title attribute within the Helmet component?

When an input element is being controlled from outside the modal using a portal, it is losing focus after a key press

I need the language chosen using Lingui's Language Switcher (i18n) to persist throughout the app, even after a refresh

Error: The function Undefined is not recognized by express.io

The Vue3 property 'x' is not recognized on type 'Function' as a global property

Differentiating elements from two array objects in typescript: a guide

Ways to modify the text of an HTML element when hovering over it

Using JavaScript to listen for events on all dynamically created li elements

Creating a background with image overlays in React: A step-by-step guide

jqGrid - Error when the length of colNames and colModel do not match!

Make sure to verify if all values are contained within an array by utilizing JavaScript or TypeScript

What causes my Excel file to become corrupted when inputting new data?

Can anyone recommend a speedy sorting algorithm for an extensive list of objects in JavaScript?

Retrieve a PHP file utilizing Javascript or JQuery

Load upcoming and previous slides in advance

The Socket.io client establishes connections with multiple servers simultaneously