Angular's lazy evaluation technique for single-shot binding on expressions

Since AngularJS version 1.3.0-beta.10, a new feature has been introduced called the "lazy one-time binding".

To implement this feature, you can prefix simple expressions with ::, which instructs AngularJS to stop watching the expression after it has been evaluated for the first time. An example of this syntax is:

<div>{{::user.name}}</div>

Is there an equivalent syntax available for more complex expressions like the ones below?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>
javascriptangularjsbindinglazy-evaluation

Answer №1

Absolutely! You have the option to add :: in front of any expressions, including those within ngIf or ngClass:

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

In reality, the code simply verifies that the first two characters in the expression are : to enable one-time binding (then removes them, hence the parentheses are not necessary). All other aspects remain unchanged.

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

The JavaScript filter function will only return arrays that have matching IDs

How can I filter out book data based on the author's id? I have a list of books with various author ids, and I want to only return the books that match a specific author id. However, my current filtering method doesn't seem to work correctly as i ...

javascriptarraysfilter

Encrypting data using SSL in javascript and python simulation

Due to the restrictions imposed by the Great Firewall of China, Google AppEngine's secure https port has been blocked. To ensure the protection of my users' information from being intercepted by ISPs and the GFW, I am planning to create a Secure ...

javascriptpythonssl

Has the user successfully authenticated with Google?

Possible Repetition: How to verify if a user is logged into their Google account using API? I'm working on a website that displays a Google Calendar. My query is: Can I determine whether a user is currently logged into a Google Account? If it&ap ...

javascripthtml

Analyzing JSON information using an AJAX request from a local file

I have a PHP file on a web server that is executing queries to a MySQL database. Currently, I am testing a site on my local PC which utilizes a JS file with AJAX requests to retrieve JSON data from the mentioned PHP file. My question is whether it is fea ...

javascriptphpmysqlajaxjson

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

javascriptjquerycsslinq

Can you explain the purpose of the "then" function in Bootstrap UI?

After reviewing the documentation for Bootstrap UI at http://angular-ui.github.io/bootstrap/, I am now exploring modals. However, I am having trouble understanding the following lines: modalInstance.result.then(function (selectedItem) { $scope.selecte ...

angularjsangular-ui-bootstrap

Mobile application showing alerts for connected devices

In the process of creating a hybrid mobile app, I'm looking to incorporate notifications in the top right corner of the application. The frontend consists of html and angularjs, while the backend utilizes spring rest web service. To convert the front ...

htmlangularjscordovamobilehybrid

Routing WebSocket connections with Node.js

Currently, I am in the process of developing a chat application for my company which will run on node js with websocket (ws). The app is designed to cater to various departments within the organization, each with its own set of users. My goal is to ensure ...

javascriptnode.jswebsocketcrossbar

Building a Dynamic Web App with PHP and Vue.js

I developed an API using PHP and you can access it through this link: However, I encountered an issue when trying to display the data on the front-end of my Vue.js (Home.vue) file using axios. Below is the code I used: <ul class="ta-track-list" v-if= ...

javascriptphphtmlvue.js

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

Hey everyone, I hope you're having a good morning. Apologies for the inconvenience, I've been practicing to improve my skills and encountered an issue while working on a login feature. I'm trying to connect it to an API but facing a strange ...

javascriptangulartypescript

How to use $refs in Vue.js to update the content of a <span> element

In my <template>, I have a <span> element with the reference span-1. <span ref="span-1">my text</span> I am trying to update the content of this <span> from my text to my new text using $refs in my <script> se ...

javascripthtmlvue.jsvuejs2

External JavaScript files cannot be used with Angular 2

I am attempting to integrate the twitter-bootstrap-wizard JavaScript library into my Angular 2 project, but I keep encountering the following error: WEBPACK_MODULE_1_jquery(...).bootstrapWizard is not a function I have created a new Angular app using a ...

javascriptangulartypescript

What is the process for verifying a checkbox after it has been selected?

I simplified my code to make it easier to understand const [factor, setfactor] = useState(1); const [nullify, setNullify] = useState(1); const Price = 10; const Bonus = 15; const finalPrice = (Price * factor - Bonus) * nullify; // start ...

javascriptreactjsreact-hooks

JavaScript for_each loop

Is there a way to access the field index of a JSON-Array when looping through it? I am aware that there is no foreach-loop like in PHP. This is an example of my json: { 'username': 'Karl', 'email': '<a href=" ...

javascriptarraysjson

Issues encountered when attempting to append the array objects to HTML using $.getjson

Hello, I have a JSON data structure as shown below: [{ "menu": "File", }, { "menu": "File1", }] I have created jQuery code to dynamically add the response to my HTML page like this: $(document).ready(function () { $.getJSON('data.json&a ...

javascriptjson

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

The d3.js Time Scale Chart is facing issues when rendering with Array object values, unlike static values which render the chart perfectly

Generating an Array Dynamically with N objects from a JSON File var taskArray = []; d3.json("input.json", function(error, json) { if (error) return console.warn(error); for ( var i = 0; i < json.length; i++) { ...

javascriptarraysjsond3.jssvg

What is the best way to specify a function parameter as the `QUnit` type using TypeScript in conjunction with QUnit?

In my project, which is partially written in TypeScript and licensed under MIT, I am utilizing QUnit. I have some TypeScript functions that require QUnit as a parameter, and I would like to define their types based on its interface from the typings. For e ...

javascripttypescriptqunit

The onClick event function is activated when the component is first rendered on the screen

Below is the function in my component: myFunc = () => {...} This is how I implemented it: <MyComponent onClick={this.myFunc()}/> The onClick function will trigger when the component mounts. However, if I use either of these alternatives: < ...

javascriptreactjsfunctionecmascript-6

Disabling `no-dupe-keys` in ESLint does not seem to be effective

Currently, I am working on a project where I have incorporated Typescript and ESLint. However, I have encountered an issue with the error message stating: An object literal cannot have multiple properties with the same name. I am looking to disable this s ...

javascripttypescripteslint