What is the necessity for an additional item?

After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery.

In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an interesting approach where they nest the selected item within an inner property.

$scope.selected = {
   item: $scope.items[0]
};

instead of simply 

$scope.selected = $scope.items[0];

Surprisingly, their code performs as expected while mine does not.

Why is this necessary? What potential JavaScript pitfall is present here?

Thanks

javascriptangularjs

Answer №1

They're housing the property within a nesting structure to accommodate its usage in the modal:

<li ng-repeat="item in items">
    <a ng-click="selected.item = item">{{ item }}</a>
</li>

The ng-repeat function generates a subordinate scope for each <li> element (the modal itself also creates a separate scope); therefore, if you were to use 

$scope.selected = $scope.items[0];
, changing the selected property via ng-click would only impact the child scope and not the parent scope (which is desired in that scenario). You can also refer to my explanation in another response here. On the other hand, with 

$scope.selected = {
    item: $scope.items[0]
};

the modification will be reflected in the parent scope's selected object.

Answer №2

I've always found this issue to be a bit bothersome, so I decided to do some research :)

It appears that the problem lies in how primitives and scope inheritance interact. By storing properties in Objects, you can prevent them from being overwritten within directives like ngRepeat.

For more information, check out: https://github.com/angular/angular.js/wiki/Understanding-Scopes

It's also important to note that using ng-click="selectedItem = item" may not work as expected, but ng-click="selectItem(item)" will work fine even without the container object.

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

JavaScript function that shows the name of an individual extracted from a specific file

Hey there, currently I'm diving into a javascript tutorial and exploring ways to display a person's name along with their birthday on this historical day. <script type="text/javascript"> document.write("Today is <br/&g ...

javascript

Node.js and Express facing challenge with Stripe checkout functionality

I am encountering an issue while attempting to integrate stripe into my checkout process. When I click on the checkout button, instead of being directed to the checkout page, I receive the following message: {"url":"https://checkout.stripe.c ...

javascriptnode.jsexpressstripe-payments

Error message: "Property undefined when Angular attempts to call a function from jQuery/JavaScript."

I'm currently attempting to invoke an angular controller from my JavaScript code. This is my first encounter with Angular and I must admit, I'm feeling a bit overwhelmed! I've been following this example: Unfortunately, when testing it out ...

javascriptjqueryangularjs

Tips for sending routeparams value to model window in AngularJS

In the current project, I am working on implementing a modal window for the edit screen functionality. The process involves displaying a list of items on the screen, from which users can select one row and then click on the modify button to open the edit s ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

Leveraging bespoke JSON for crafting an Angular form and extracting data

Hey there, I'm currently using AngularJS to build my application and I've run into an issue with generating a dynamic form. Here's an example of the JSON structure I'm working with: { lines :[ { fields:[{ fi ...

jsonangularjsangularjs-directiveangularjs-scope

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

URL-based authentication using Passport.js

I am currently working on my app using Express JS and Passport JS. My goal is to allow a new user to automatically log in once by accessing a specific URL. I have the ability to retrieve the user information from the database based on the URL provided, re ...

javascriptnode.jsexpresspassport.js

Generating dynamic key-value pairs in AngularJS and transferring them to a Java Map in real-time

Within the user interface, I have two empty text boxes - one for a key and another for a value. Along with these text boxes, there is an "add" button and a "submit" button. When the user clicks on the add button, they can add one more pair of text boxes to ...

javaangularjs

Generating a Personalized XML Format Using Information from a Single MySQL Table Row by Row

If anyone can assist with this, I would greatly appreciate it: <warehouse> <frontbay> </frontbay> <bayrow> <bay> </bay> <bay> ...

phpjavascriptmysqlxml

Is it possible to create a central hub for all routes in a large AngularJS application?

Developing a large angularjs application with the intention of utilizing require.js for lazy-loading additional modules. The main question at hand is whether to create a comprehensive route.js file containing all the routes to other modules, or if each mod ...

javascriptangularjs

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs

AngularJS triggers the function on all controllers

I encountered a problem with a specific function in my code. The issue is that the scrollFunction continues to get triggered even when I navigate to another page. I would like to limit this functionality to only apply to a particular page within the cont ...

javascriptangularjsscrolltopdocument-body

Utilizing component state or props within Redux mapDispatchToProps operations

As a newcomer to Redux/React, I am still grappling with the concept of dispatch in the Redux environment. Currently, my approach to issuing Redux actions within components involves directly calling the dispatch() function from my component props: const ma ...

javascriptreactjsreduxreact-redux

Manipulate Attributes in Javascript

Having an issue here - I'm trying to use JavaScript to set some attributes. for(i=0;i<div_navi.childNodes.length;i++){ if(div_navi.childNodes[i].nodeName =="SPAN"){ div_navi.childNodes[i].setAttribute("onclick","g ...

javascripthtmlajaxdom

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

javascripthtmlvalidationdomradio-button

Adjust the height of a div vertically in Angular 2+

Recently, I started using angular2 and I've been attempting to create a vertically resizable div without success. I have experimented with a directive for this purpose. Below is the code for my directive: import { Directive, HostListener, ElementRef ...

javascriptangulartypescriptresizeangular2-directives

An issue has been encountered with the default selection in a dropdown menu

Struggling to make the initial option of a select box "selected" upon page load. Check out the code on Plunker In the provided plunker example, the select box appears empty when the page loads even though the deal model has a default category value. What ...

angularjs

Guide to setting up an object array in JavaScript with unique child elements and no duplicate values

I have an array that looks like this: sampleArray = ["x", "y", "z". "a.b", "a.b.c", "a.b.d", "a.e.f", "a.e.g"] However, I am aiming to transform it into the following structure, or something similar to it: newArray: [ { "x": [] }, ...

javascript

Oops! There seems to be an error in the code: SyntaxError: DOM Exception 12 setRequestHeader@[

Currently working on the development of a mobile application for Android and IOS using Phonegap, AngularJS, and CORS_REST. Most headers are functioning well on Android, but encountering issues when testing on iPhone with GapDebug. An example of the authen ...

angularjsiphonehttp-headers

Building an interactive array with checkboxes and mapping in React JS: A step-by-step guide

I am currently working on mapping a list of formations and would like to implement a dynamic array that updates when a checkbox is selected in the onChange event. The goal is to keep my organization updated with the formations they are able to dispense. ...

javascriptarraysreactjscheckboxmaterial-ui