Tips for updating data-ng-init with a directive

Is there a way to automatically refresh the variable assigned in data-ng-init whenever the source data changes, without having to do it through the controller?

I'm looking for a directive that can achieve this. Any suggestions or examples would be appreciated.

To illustrate, take a look at the sample demo below which features sections for both Cars and Bikes. When you click "Add Car," the listing and counts get updated as expected since it's directly from the source data.

However, when you click "Add Bike," the bikeData variable does not get refreshed as it still holds the initial JSON value only.

data-ng-init="bikeData = (sorted | filter: { type: 'bike' }:true)"

Check out the demo here!

javascriptangularjs

Answer №1

It seems like the issue is with the bikeData not being updated after. You can either monitor changes on your sorted object and make sure to update the bikeData accordingly. Alternatively, you could apply the same expression from your data-ng-init to your ng-click directive. Check out this demo for reference:

http://jsfiddle.net/tomalex0/9jxQK/1/

Another approach would be to eliminate the data-ng-init and bind your ng-repeat directly to the sorted object similar to what you are doing with cars. For instance:

<ul ng-repeat="item in sorted | filter: { type: 'bike' }:true">

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

Unpredictable algorithm for selecting the champion

I manage a website that features promotions and users. Users have the ability to register for these promotions, with one random user selected as the winner. Initially, the formula for selecting the winner was quite simple: $total_users = 100; //total use ...

javascriptphprandomlogic

Converting JSON to JavaScript Date using UTC time

I am struggling with formatting the dates in a JSON object to work with highcharts. The JSON looks like this: [ [ "26-Sep-14", 10 ], [ "29-Sep-14", 75 ] ] Highcharts requires dates to be in the format Date. ...

javascriptpythonjsonhighcharts

Is there a way to modify a specific key value in all embedded objects using Mongoose?

I'm currently working on a chat application and I'm facing a challenge with implementing the 'seen' functionality. I need to update all chat messages in the database by setting the 'seen' column to true. Here is the schema st ...

javascriptnode.jsmongodbexpressmongoose

Can the HERE Maps API for JavaScript effectively render ZIP code borders without compromising performance?

There is a requirement to display approximately 4500 ZIP codes across the country. Each ZIP code polygon is highly detailed with a large number of points (vertices) and needs to be interactive, allowing individual ZIP codes to be highlighted on mouse hover ...

javascripthere-api

The Mongoose findByIdAndUpdate() method in NodeJS may sometimes result in a null return

Exploring the code snippet below in NodeJS, we focus on updating a document by its id: router.put('/:orderId', async(req, res) => { let update_orderId = req.params.orderId; let new_item = req.body.item; let new_item_desc = req ...

javascriptnode.jsmongodbmongoose

Understanding how to utilize jQuery or prototype to interpret onclick event containing "setLocation(...)" can enhance the functionality

I am dealing with a specific tag: <button onclick="setLocation('http://mysite.com/checkout/cart/add/product/17/')" /> My goal is to trigger an ajax request when the button is clicked. I want to extract the URL segment "product/17" and app ...

javascriptjqueryprototype

The flow union type operates smoothly without any errors occurring

In the code snippet below, I have defined a type 'Something' which can have three possible values: 'A', 'B', or 'C'. The function 'f' takes an object of type Something as input and returns a string based on ...

javascripttypescriptflowtypeunion-types

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

How can I show the value from a text field in a column chart? I found the code for the chart on this website(). I tried using the code below, but nothing happens. Can someone please assist me? <script> window.onload = function () { ...

javascripthtmlcharts

What is the best way to pass a selected item from a dropdown menu as an argument when calling a function from

Is there a way to achieve the following with AngularJS?: <select> <option ng-repeat="item in items" value="item">{{item.name}}</option> </select> <a ng-click="foo(item)">Action</a> The function foo is defined in an An ...

javascriptangularjsangularjs-ng-repeat

What is the best way to retrieve data from divs that are nested within another element using Javascript?

I am currently working on implementing a modal that will showcase specific information based on the event-card it originates from. Here is an HTML snippet showcasing an example event-card: <div class="event-card upcoming hackathon"> <d ...

javascripthtmljquerybootstrap-4

A guide on looping through an array of objects to add information to a nested array in MongoDB

Currently, I am in the process of developing a blog application and working on an online editor feature. The schema I'm using for this project is outlined below: var blogSchema = restful.model('blog-schema', mongoose.Schema({ title: Str ...

javascriptarraysmongodbexpressmongoose

Is d3 Version pretending to be a superior version?

I have encountered an issue with my project that involved using d3 v5.5.0. After transferring it to a different computer and running npm install, the application now seems to be recognizing d3 as a higher version? A crucial part of my program relies on th ...

javascriptreactjsd3.js

The limitation of only being able to include up to 2 adsterra ad banners on a Next.js 14 application

I'm encountering an issue when trying to include more than 2 Adsterra ad banners on my Next.js 14 app. Whenever I attempt to display two Adsterra ad banners on the same page, the first one fails to render properly. I have also experimented with next/s ...

javascriptreactjsadsnext.js14

Error in MEAN Stack: Unable to access the property 'companyTitle' because it is undefined

I have established a MongoDB collection named joblist in my database. Additionally, I have developed a DB schema known as jobList.js. var mongoose = require('mongoose'); const joblistSchema = mongoose.Schema({ companyTitle: String, jobT ...

javascriptnode.jsangularexpressmean-stack

The display in the view is not reflecting the $scope value

I'm facing an issue where I have the data in my controller but it's not displaying in the view as expected index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initi ...

angularjs

Execute a jQuery focus() function on a textarea element within a dynamically added form on the webpage

Whenever I dynamically insert a new form onto the page using clone(), my goal is to have the textarea within the form automatically focused. However, despite trying out the code below, it seems like it's not functioning as expected: .on('click&a ...

javascriptjqueryhtmlfocustextarea

What is the best way to set a default selected value in an input text box?

Incorporating the typeahead feature into my project has been incredibly useful: <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state.id as state.desc for state in states | filter:{name:$viewValue ...

angularjsangular-ui-bootstrapangular-uiangular-ui-typeahead

Incorporating React into an existing jQuery single page application

My current dilemma involves transitioning from a jQuery-built single page app to React. The challenge I'm facing is that, when building sections at a time, issues arise during the process. One major obstacle is the necessity of passing in a parent "r ...

javascriptjqueryreactjsfrontend

locating the truth value of the data in an array retrieved from MongoDB

When returning from the mongoose find() function, I need to ensure that is_reqestor = true is checked. However, when updating the document, I pass the id which needs to be updated. let filter = { is_reqestor: true } if (!is ...

javascriptnode.jsreactjsmongodbmongoose

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

javascripttypescriptecharts