Working with Angular.js ng-repeat and conditions

I am utilizing ng-repeat to loop through a key/value array. In cases where the key matches 'First Name', I want to bind it to firstName. Being new to angular.js, I wonder if there is a more efficient way of achieving this? Essentially, I have a key/value array and I need to perform specific actions on certain keys within it.

<ul id="customers" infinite-scroll='loadMoreUsers()'>
        <li ng-repeat="user in users" data-customer-id="{{user.Id}}">

               <h4>{{user.firstName}} {{user.lastName}}</h4>

            <div ng-repeat="(key, value) in user.AttributeBag">
                <span ng-if="key == 'First Name'">{{user.firstName = value}}</span>
                <span ng-if="key == 'Last Name'">{{user.lastName = value}}</span></span>

                <span ng-if="key != 'First Name' && key != 'Last Name'">{{key}} : {{value}}</span>
            </div>
        </li>
    </ul>

Answer №1

ng-if generates a separate child scope, which is why you are unable to reach the key

I can suggest two potential solutions:

  1. Try using ng-show instead of ng-if. Unlike ng-if, ng-show does not create its own scope.
  2. Utilize $parent to access the parent scope. However, keep in mind that you are working with an abstraction of user.AttributeBag in your ng-repeat, so some adjustments may be necessary.

Answer №2

source : http://www.example.com/arrays-and-objects

In the world of JavaScript, arrays do not support named indexes. Instead, arrays in JavaScript always rely on numbered indexes for organization. Caution ! Attempting to use a named index will cause JavaScript to convert the array into a standard object. Subsequently, all array methods and properties will yield inaccurate outcomes.

var employee = [];
employee["name"] = "Alice";
employee["surname"] = "Smith";
employee["age"] = 30;
var a = employee.length;         // employee.length will return 0
var b = employee[0];             // employee[0] will return undefined

You may want to reconsider your approach and consider utilizing an array of objects instead.

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

AngularJS routing is unresponsive

I am new to routing in Angular and have been trying to understand how it works. After reading the documentation and injecting the ngRoute module, I still can't get the Employee Name to display when clicked on. I've spent a lot of time troubleshoo ...

How can I use AngularJS to save selected assets?

<div style="z-index: 1; position: absolute"ng-show="ctrl.company.selected"> <div style="" ng-repeat="Asset in ctrl.company.selected.Assets"> <div class="pd-5"style="width: 300px; background-color: white; border-bottom: gray solid ...

What is the best way to extract the event time when a user clicks on an event in fullcalendar?

Is there a way to extract only the time from an eventclick event in fullcalendar? Currently, I am receiving details about the event including date and time. How can I specifically retrieve just the time (e.g. 6:00:00 am)? You can find the code snippet tha ...

Angularjs- Extract information from a 2D array

I'm working with an array structure like this: $scope.testArr = [ { 'ONE_MTH': [ { 'value':'1_1', 'rolle':'one1' }, { 'value':'2_1', 'rolle':'two ...

Shopping Directive Coverage Discrepancy

In my application, there is a shop item directive that includes a price attribute. When a user interacts with the directive, the total cost (a variable stored in the main controller) should be updated by the price of the item that was clicked. Unfortunate ...

AngularJS UI-calendar eventSources not being properly refreshed

My issue is with the AngularJS UI-calendar not updating the $scope.eventSources data model after an event Drag and Drop. I have tried multiple solutions but nothing seems to work. Here is a snippet of my code: /* config object */ $scope.uiCon ...

Stop the selection of text within rt tags (furigana)

I love incorporating ruby annotation to include furigana above Japanese characters: <ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> However, when attemp ...

The build process encountered errors related to webpack, preventing the successful compilation of nextjs CSS styles

https://i.sstatic.net/JBscR.png I'm encountering an error and struggling to determine if I'm properly importing styles and using components correctly. Can someone guide me in the right direction? Cloning github.com/branexists/nextjs (Branch: main ...

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

Using mapStateToProps to retrieve data

I have a component that requires data from my Redux store. However, the data is being passed in a different way than expected. I am unsure how to use mapStateToProps in this scenario to retrieve the necessary information. Here is the component where I nee ...

Can you explain the distinction between the terms "vite" and "vite preview"?

I recently created a project template with the help of vite. While looking through my package.json file, I noticed the following section; "scripts": { "dev": "vite", "build": "vue-tsc --noEmit &&a ...

Vuejs Error: "No template or render function defined for a single file component"

When attempting to import all components from a folder and display one based on a passed prop, I encountered an error at runtime. I am using webpack with vue-loader to import all my components, each of which is a *.vue file. The issue arises when importi ...

The initial zoom level on Google Maps does not adjust when using the fitBounds method for polyline

I am currently utilizing the fitbound function to automatically zoom in on a polyline displayed on a map. However, I have noticed that on the initial attempt, it does not work as expected. But if I make changes to the chartData and then call the same funct ...

What is the best way to asynchronously load an external javascript file in a popup.html file?

I have successfully implemented all the necessary functionalities, but I noticed a delay in loading the popup.html after adding an external javascript file. This file is only a few lines long, so the delay is quite frustrating. To eliminate this lag, I be ...

passing arguments during deferred resolve() and when() operations

I am currently working on a flash card website and I need to determine the status of preloaded images once they have finished loading or if there was an error. After obtaining the status of each image, I will proceed with further actions. My code is inspi ...

Despite being queried, the new content on Hygraph is still not appearing

Currently, I am in the process of developing my personal portfolio website using NextJS and incorporating a blog feature with hygraph for post storage (which is derived from the default nextjs blog setup). However, I have stumbled upon an unusual issue. Af ...

Is it possible to call componentDidMount() multiple times in React?

I am in the process of converting an HTML API to ReactJS. The original HTML API is as follows: <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getE ...

Locating input fields using Selenium with AngularJS

Recently, I've started using Selenium for end-to-end testing automation. How can I locate the input below? <input type="text" class="input-xlarge ng-pristine ng-invalid ng-invalid-required" data-ng-model="model.campaign.name" required="" data-ng-d ...

What is the reason behind the significant 80% reduction in PNG files by grunt-contrib-imagemin compared to the minimal reduction of less than 0.1%

Just getting started with Grunt here. Recently, I've been experimenting with grunt-contrib-imagemin. When it comes to compressing PNG files, it does an impressive job. It typically reduces the size by around 80%. However, I'm finding that the ...

Is there a way to activate jQuery validation using a button click?

I'm currently working on a form that utilizes jQuery validation for a test demo. <script src="../JS/jquery.js" type="text/javascript"></script> <script src="../JS/jquery.validate.js" type="text/javascript"></script> ...