HTML
<input type="text" ng-list ng-model="OtherHobby" />{{OtherHobby}} <br />
{{AllHobbys}}
Javascript
$scope.OtherHobby = [];
$scope.AllHobbys = $scope.OtherHobby;
I ran a test on this piece of code. The variable "OtherHobby" works as expected, displaying the input from the textbox. However, the variable "AllHobbys" does not show anything. I am puzzled by this discrepancy. Can anyone explain why that might be happening?
The problem might be related to references. To resolve this issue, you can initialize "otherHobby" as an object.
Here is a snippet of the HTML code:
<input type="text" ng-list ng-model="otherHobby.value" />{{otherHobby.value}} </br> {{allHobbys.value}}
Below is the corresponding Javascript code:
$scope.otherHobby = {};
$scope.allHobbys = $scope.otherHobby;
Remember to use camelCase when naming variables for better readability.
Consider implementing $watch on your variable. You may find this helpful jsfiddle example.
Have a great day!
Instead of using $watch, consider finding an alternative method as Angular has to create a deep clone of the entire array for monitoring purposes.
It seems unnecessary to have two identical references to one object. If you provide more context, I may be able to propose a more efficient solution. Best of luck!
Here are a few important points to consider:
$scope.OtherHobby = []; // By assigning ng-model=OtherHobby, you are creating an array that will now hold string values instead of array values.
When you execute
$scope.allHobbys = $scope.otherHobby;However, when you update a value in the textbox, it creates a new string (as strings are immutable).
As a result, $scope.OtherHobby now points to a different location than before.
But your $scope.allHobby still points to the original location.
Check out this demo for further insight.
Looking to timestamp my querystring for browser caching bypass when refreshing page via javascript. Need to consider existing querystring with timestamp and hash tag (http://www.example.com/?ts=123456#example). Tried my own solution but it feels overly co ...
I'm currently facing an issue while working on a project. My goal is to build a MongoDB database where I can store dates and YouTube video links. I've chosen to use Mongoose as my ORM. The problem I'm encountering is that while I can create ...
My HTML code looks like this: <label class="item item-input item-stacked-label" ng-repeat="nl in normativas"> <select ng-model="nl.idResultado"> <option value="1">OK</option> <option value="2">NOT</op ...
I am trying to optimize the performance by loading the child nodes of a parent node only after clicking on that specific parent node. It is important because there are many child nodes, so this method helps in keeping the performance high. Currently, I ha ...
Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...
I'm new to this, so I hope this is a straightforward question. I'd like to use the bgtoggle class as a button to switch the background color of the metro class. I know I'm doing something wrong because it's not working as expected. Any ...
After attempting to transfer the Porto Admin HTML template to Angular, I encountered some issues. When including the CSS and JS dependencies in the project, everything worked fine with all the HTML code in index.html. However, when I moved the code to app. ...
I have created a sample TypeScript object with the following code: declare const S3 = "https://s3.amazonaws.com/xxx/icons"; declare const SVG = "svg-file-icons"; declare interface MyIcons { "image/jpeg": string; "image/jpg": string; } export const F ...
Having trouble using the JSON.stringify() method to convert some values into JSON format. The variable amount is a string and I want the final value in JSON format to be a number, but it's not working as expected. Even after applying JSON.stringify(), ...
My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...
The map is displayed with the color fill only when a mouse enter event occurs. How can I make it trigger on load instead? I am working with react-simple-maps, and the JSON data is successfully loading the map on mouse enter. You can find the source code ...
The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...
My web application is built using AngularJS, but we also have a legacy web app that functions only in quirks mode and is included via an iframe on one of our pages. The challenge is to make this legacy app work within our main browser-based application, wh ...
After conducting a search, I came across a helpful resource on Stack Overflow titled Enable/Disable a dropdownbox in jquery which guided me in the right direction. Being new to jQuery, I found it useful to adapt code snippets to suit my needs. Now, my que ...
I am struggling with using a function inside a Node.js module. I have implemented a custom sorting function to sort an array of objects based on the value of a specific property. exports.getResult = function(cards) { cards.sort(sortByField('suit& ...
Currently, I am working with Express.js and facing a challenge in passing parameters from one JavaScript file to another. How can this be accomplished? The two files involved are 1. process.js var WebPageTest = require('webpagetest'); var wpt ...
I am facing an issue while trying to retrieve an object from an array within a Model. Despite verifying my query params and confirming that they are correct, I am unable to get it to function as expected. Any assistance on this matter would be highly appre ...
I need to include additional inputs for "+ and -" 60mm and 120mm in my function. How can I achieve this without turning all of them into separate functions? <template> <card class="card"> <h2>Measurement</h2> <form&g ...
I have the following structure in JSON format: "disputes": [ { id: "", negotiation_type: "", history:{ user_flag: "", created_at: "", updated_at: "", created_by: null, updated_by: null, ...
I am sharing the HTML content of my test page that I am looking to customize similar to some websites I have come across. My goal is to create a rotating div with an unordered list (ul li), where only three divs are displayed at a time while the rest remai ...