Angular: Modify value when checkbox is ticked

Controller:

promiseObj.physical = $http.get('search?sumBoth=1&customer=' + customer).success(function(data) {

$scope.servers = data; // retrieve data from JSON

});

View:

<tr ng-repeat="data in servers | filter: { _id: { idc: item._id.idc } }">
            <td>{{data._id.cluster}}</td>
            <td>{{data.Physical.SumCores}}</td>
            <td>{{data.Virtual.SumCores}}</td>
            <td>{{data.Physical.SumMemory}}</td>
</tr>

Oversubscription? <input type="checkbox" name="oversubscription" />

I want to update

<td>{{data.Virtual.SumCores}}</td>
to
<td>{{data.Virtual.SumCores/4}}</td>
if the oversubscription is true.

I am new to Angular and still learning:

Should I make this change in the view or the controller?

What would be the best approach for this situation?

Answer №1

If you want to implement this functionality in the view, make sure to assign your checkbox an ngModel

Interested in Oversubscription? <input type="checkbox" ng-model="overSubscription" name="oversubscription" />

<td>{{overSubscription ? (data.Virtual.SumCores / 4) : data.Virtual.SumCores}}</td>

Alternatively, you can use an ngChange directive on the checkbox and handle it with some controller logic:

Oversubscription? <input type="checkbox" ng-change="calcCores(overSubscription)" ng-model="overSubscription" name="oversubscription" />

Controller:

$scope.calcCores = function(checked) {
    $scope.servers = $scope.servers.map(function(server) {
        server.Virtual.SumCores = checked ? (server.Virtual.SumCores / 4) : server.Virtual.SumCores
        return server;
    });
}

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

Troubleshooting slow/delayed performance when using manual dataItem.set() in Kendo UI Grid

I recently implemented an editable Kendo Grid with a checkbox column to toggle a boolean value, thanks to an ingenious solution offered by OnaBai. The implementation works flawlessly! The only issue I'm facing is that there seems to be a delay in cha ...

Exploring the use of Dividers within Material-UI's Tabs

When attempting to include a Divider or any other element that is not a Tab within Material-UI Tabs, DOM warnings may appear in the console. <Tabs ...> //... <Divider /> //... </Tabs> One workaround for this issue involves creatin ...

Adding a new element to a list using md-autocomplete

I am seeking guidance on how to utilize md-autocomplete to search for an object within an array. If the object is located, I want to populate an edit form; however, if the object is not found, I would like the user to have the ability to add a new one usin ...

I crafted this dropdown menu, but for some reason, the selections aren't registering when clicked. Below is the code I used. Any assistance would be greatly appreciated!

Hi there, I need some help with getting my code to run properly. I've created a dropdown box using HTML and CSS, but it seems like there's an issue with the JavaScript portion as the options are not being selected. I've included a code snipp ...

Addressing the issue with this.setState and this.state on the Registration page

I am facing an issue with my Registration Page code. I am trying to send data to a database using this.setState and this.state, but every time I run the code, it shows an error in the onSubmit function related to this.state. Can someone please help me unde ...

The page remains static even as the function is executed

Having trouble with creating a sliding form using jQuery. The issue is that instead of sliding to the desired page, it slides to a blank one. The website where this problem can be seen is www.entrilab.com. Upon inspecting the element, there are no errors ...

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

Are there any customizable actions available for the `yarn remove [package]` command, such as post-installation hooks?

I must execute a script following the completion of the following commands: yarn add [package] yarn remove [package] yarn upgrade [package] yarn install postinstall gets triggered after yarn add, yarn upgrade, and yarn install. However, it doesn't s ...

Determining a User's Connection Status in ReactJS: Cellular Network or WiFi?

Are there any tools or applications available that can determine if a user is connected to WiFi or using a cellular network? ...

Is it possible to execute a REST call in JavaScript without utilizing JSON?

(I must confess, this question may show my lack of knowledge) I have a basic webpage that consists of a button and a label. My goal is to trigger a REST call to a different domain when the button is clicked (cross-domain, I am aware) and then display the ...

Vue allows you to easily generate child div elements within a parent

Having some issues creating a child div with Vue. The code is being placed correctly, but it's being stored as an array. <template> <div class="containers" v-bind:style="{ backgroundColor: pageStyle.backgroundColor, paddingLeft:'5%& ...

Validation of Email Existence (Using Django and Javascript/Ajax)

I'm currently facing a challenge with building an E-mail validator using Django and Javascript/Ajax. Despite my efforts, I seem to be stuck at a certain point where the Ajax response consistently shows: {response: "This field is required.", email: fa ...

Ways to alter the div post user authentication

I'm in the process of developing a website with a single-page application setup. I'm utilizing Node.js for the backend and Angular for the frontend. The challenge I'm facing is displaying a specific div when a user is not logged in, and swit ...

How to enhance a jQuery tab control by implementing custom JavaScript forward and back arrows?

Although there are other questions related to this topic, mine is unique. I have a scrolling jQuery feature that utilizes tabs for selection and is automated. Modifying the layout is challenging because it is dynamic and depends on the number of items in t ...

Replace the hyperlink with plain text using JQuery

Is there a way to replace a hyperlink within an li element with different text but without removing the entire list item? <li class="pull-left"> <a href="#" class="js-close-post" data-post-id="1"> Close </a> </li> ...

Retrieve the $http data from a function that is external to it

Apologies if the title is confusing, it's hard to explain in a different way. The situation I have is... app.controller('viewProductController', ['$scope', 'dataFactory', '$routeParams', function($scope, dat ...

The success of your order hinges on jQuery being defined when using browserify

I encountered an issue while attempting to utilize a plugin located in /js/lib/stellar.jquery.js: var $ = require('jquery'); require('./lib/stellar.jquery') $(function(){ $.stellar(); }); Upon running the code, I received an err ...

Using AngularJS Typeahead with restrictions on $http requests

I have been attempting to restrict the number of results displayed by Angular Bootstrap Typeahead during Async calls, but unfortunately, it does not seem to be functioning as expected. <input type="text" ng-model="asyncSelected" placeholder="Locations ...

Tips for implementing react portal functionality in react 15

Working on my current project with react 15, I am looking to display an overlay on the screen when a dropdown is opened. While React 16 allows us to utilize React portal to render children into a DOM node outside of the parent component's hierarchy, h ...

Exploring the capabilities of Angular 2 and delving into inquiries regarding IIS

I'm diving into the world of Angular 2 as a beginner. Previously, I used to include JavaScript (like jQuery.js) in my HTML and then upload the finished page to my IIS website. Now that I'm learning Angular 2, I've had to install Node.js, NP ...