I'm exploring the use of Angular for data-binding with input type="number" elements, but I'm encountering difficulties in getting the binding to work. When I make changes to any value, I expect the corresponding binded value to update as well.
JSFiddle: http://jsfiddle.net/myExample/123/
Your assistance would be greatly valued.
Implement $watch:
app.controller('MyCtrl', function($scope) {
$scope.wheels = $scope.cars * 4;
$scope.$watch('cars', function(){
$scope.wheels = $scope.cars * 4;
});
});
Your goal is not to achieve simple 2-way binding.
app.controller('MyCtrl', function($scope) {$scope.tires = $scope.bikes * 2;
});
The above code will only update the tires value when the controller is called, not when the bikes value changes. To accomplish this, you can add a watch on Bikes to update the tires value whenever bikes changes:
app.controller('MyCtrl', function($scope) {$scope.$watch('bikes', function(){` $scope.tires = $scope.bikes * 2;`
})
});
There are two methods you can use:
1- Using `ng-change`:
<input type="number"
ng-change="tires = bikes * 2"
min="0" ng-model="bikes" placeholder="Bikes" id = "bikes"/>
Alternatively....
2- Utilizing $watch:
app.controller('MyCtrl', function($scope) {
$scope.$watch('bikes', function(newValue, oldValue) {
if(newValue === oldValue) {
return; // Angular calls watch at initialization with no change
}
$scope.tires = $scope.bikes * 2;
});
});
Give this a shot:
When working with html,
Implement ng-change:
<input type="number" min="0" ng-model="bikes" placeholder="Bikes"
ng-change="Calculate()" id = "bikes"/>
In JavaScript,
$scope.Calculate = function(){
$scope.tires = $scope.bikes * 2;
};
Hopefully this solution proves useful.........
Let me point out a couple of important things:
It's crucial to define your model in a "model" type property - check out this resource for more information:
You must "watch" for changes in the "bikes" property so that the "tires" property can be updated accordingly.
Take a look at this updated JSBin for a demonstration: http://jsbin.com/kiqivule/15/edit?html,js,output
Firstly, $watchGroup was introduced in v1.3.0-beta.6 - while in your script, you're using v1.2.10.
Secondly, all the referenced jsbins illustrate that the tires property gets updated when bikes property changes. Check out this other jsbin for a clearer view.
So, I'm unsure about the exact issue you're trying to address here. Let's discuss further.
var data = { "2738": { "Question": "How are you?", "Answer": "I'm fine" }, "4293": { "Question": "What's your name?", "Answer": "My name is John" } } var newQuestion = "Where do you live?"; var newAnswer = "I liv ...
I am looking to implement a feature where a user can select checkboxes from a grouped list populated by an API call. When a checkbox is selected, I want to add the corresponding object to an array linked to the v-model of the checkbox input. Below are the ...
In my project, I am looking to dynamically generate an HTML page based on JavaScript objects and then present it to the user. For example: var mybutton = { id: 'button_1', x: '0', y: '0', width: '100', h ...
Being fairly new to html, I'm encountering difficulties with incorporating scripts in html. I have learned javascript on the csp code.org course and am currently self-teaching html. Although I understand javascript, I am unsure about which tags and ht ...
Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...
Attempting to update a WebPack 2.1.0 beta 8-based AngularJS (Angular 1) application to WebPack 2.2.0 RC3, encountering difficulties with the ExtractTextPlugin functionality. The original functional setup was as follows: module: { ... loaders: [{ ...
I am currently in the process of developing a JavaScript based UWP app for the Windows Store. I've been transferring code from Angular 2 used in my web app directly into the UWP app. However, I've hit a roadblock as none of the material icons I&a ...
Within my angularjs application, I am working with the following JSON data: $scope.itemsList = { "busName": "ABC", "needsToHide": true, "num": 123 }, { "busName": "xyz", "needsToHide": false, "num": 567 ...
On my main page, I have a radio button that passes a value via Ajax when clicked. The result is then checked by Ajax and the corresponding output is displayed for each question as correct/incorrect. I am facing an issue with the unbind event - it works fin ...
I need to transfer arguments; I have attempted to make them global variables, but I am unsure about the correct approach. Command using the arguments : let messageArray = message.content.split(" "); const args = messageArray.slice(1); const invi ...
Is there a function in my controller to check if the user email is active or not? public async Task<IActionResult>ActiveEmailAccount(EmailActiveAccountViewModel active) { if (ModelState.IsValid) { ...
I am facing the challenge of switching to an iframe with a dynamically changing name and id. <iframe name="easyXDM_1435765828615" id="easyXDM_1435765828615">...</iframe> While exploring LeadFoot, I came across the switchToFrame() function. Ho ...
I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...
Appreciate the assistance provided. I am facing an issue where my jQuery code does not load within ajax content. Below is the code snippet from index.html : <script language="javascript" type="text/javascript"> $(function() { $("#gps").load("find. ...
I am in the process of developing a management system that utilizes three MUIDataGrids. Although only one grid is displayed at a time, users can switch between the three grids by clicking on tabs located above. The setup I have resembles the Facebook Ads ...
Currently, I am in the process of building a RESTful API using Express.js and Mongodb with the mongoose module for database access. I wanted to find the most efficient way to share the Mongo database connection throughout my entire Express application to a ...
As a website owner, I strive to optimize the performance of my site on mobile devices without the need for a separate "mobile-friendly" version or replacing large sections of code. With around 100K of JS code, including jQuery, I am determined to enhance b ...
I am looking to dynamically append a container with a specified number of div elements based on the data in a JSON file. I attempted to include the logic within a for loop, but encountered errors in the process. If you're interested in checking out t ...
Just starting out with angularjs and still wrapping my head around the concepts. Here's the scenario I'm facing - I have 2 peer controllers (no parent-child relationship), where controller1 executes steps 1 to 10, and controller2 does something ...
Is there a way to incorporate $ionicLoading with Angular's UI Router resolves? The goal is to display a loading modal when a new route/state is requested and have it disappear once the data is resolved and the new state is loaded. router .state(&apo ...