How can I pass ng-model in AngularJS input box without altering it?

Question

How can I pass ng-model in AngularJS input box without altering it?

Trying to add an ng-model value to an array inside an ng-controller using the input box.

It appears that when checking the box, the ng-model property changes:

Encountering a Problem

https://i.sstatic.net/TU0xh.jpg

https://i.sstatic.net/1qqWu.jpg

https://i.sstatic.net/W8WOc.jpg

I want the ng-model property to remain unchanged when the input is checked. Here's my code:

JSON Model

[
 {
    "nomeservizio" : "Frameworks",
    "framewrok":[
        {
            "name":"none",
            "cost": 40
        },
        {
            "name":"bootstrap",
            "cost": 0
        }
    ]
}]

HTML

    <div class="row" ng-repeat="voce in voices.data">
    <h4 style="color:#000;">{{voce.nomeservizio}}</h4>
    <div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="cssframework.cost"  ng-change="UpdateTotal({{cssframework.cost}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.cost | currency}}</b></span>
    </div>  
</div>

<div class="row">
    <h3>TOTAL: {{selectedVoices}}</h3>
</div>

JS Within Controller

    $scope.UpdateTotal = function(parameter) {
    $scope.selectedVoices = [];
    $scope.selectedVoices.push(parameter);
}

javascript angularjs checkbox

Answer 1

Answer №1

This solution offers the following benefits:

It allows for multiple values from checkboxes and inputs to be stored in an array.
Values are saved to the $scope.selectedVoices as an array when the input is clicked.

Whatever your reasons for needing this logic, this solution covers all the features you mentioned.

    myApp = angular.module('myApp', []);
    
    myApp.controller('testController', function ($scope) {

        $scope.selectedVoices = [];
        
        $scope.framework = [{
            "name": "nessuno",
            "costo": 40
        }, {
            "name": "bootstrap",
            "costo": 0
        }, {
            "name": "bootstrap",
            "costo": 20
        }];

        $scope.click = function (key) {
            $scope.selectedVoices.push($scope.framework[key].costo);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="testController">
    <div ng-repeat="(key, item) in framework">
        <input type="checkbox" ng-click="click(key)" />
        <span>{{item.name}} {{item.costo | currency}}</b></span>
    </div>
    <h1> {{ selectedVoices }}</h1>
</div>

Answer 2

This solution offers the following benefits:

It allows for multiple values from checkboxes and inputs to be stored in an array.
Values are saved to the $scope.selectedVoices as an array when the input is clicked.

Whatever your reasons for needing this logic, this solution covers all the features you mentioned.

    myApp = angular.module('myApp', []);
    
    myApp.controller('testController', function ($scope) {

        $scope.selectedVoices = [];
        
        $scope.framework = [{
            "name": "nessuno",
            "costo": 40
        }, {
            "name": "bootstrap",
            "costo": 0
        }, {
            "name": "bootstrap",
            "costo": 20
        }];

        $scope.click = function (key) {
            $scope.selectedVoices.push($scope.framework[key].costo);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="testController">
    <div ng-repeat="(key, item) in framework">
        <input type="checkbox" ng-click="click(key)" />
        <span>{{item.name}} {{item.costo | currency}}</b></span>
    </div>
    <h1> {{ selectedVoices }}</h1>
</div>

Answer 3

Answer №2

It is important that the model names for values and checkboxes are not identical.

When the checkbox is changed, it updates the model inside the cssframework object as well.

Consider using a structure like this (pay attention to the model in the checkbox input):

<div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="costo"  ng-change="AggiornaTotale({{cssframework.costo}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.costo | currency}}</b></span>
</div>

In the end, I believe that the ng-model in the checkbox is unnecessary. It is not used in this example.

Answer 4

It is important that the model names for values and checkboxes are not identical.

When the checkbox is changed, it updates the model inside the cssframework object as well.

Consider using a structure like this (pay attention to the model in the checkbox input):

<div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="costo"  ng-change="AggiornaTotale({{cssframework.costo}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.costo | currency}}</b></span>
</div>

In the end, I believe that the ng-model in the checkbox is unnecessary. It is not used in this example.

Answer 5

Answer №3

Essentially, the checkbox functionality in this code snippet sets the ng-model value to true when checked and false when unchecked. Using ng-true-value, you can customize the value assigned when the box is checked, such as setting it to 40. Here's how it works with ng-model:

<div class="row" ng-repeat="voce in voices.data">
    <div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="cssframework.costo[$index]" ng-true-value="voce"/>  
    </div>  
</div>

This setup allows you to access the values of "cssframework.costo" in the controller using console.log($scope.cssframework.costo), which will return an array.

Answer 6

Essentially, the checkbox functionality in this code snippet sets the ng-model value to true when checked and false when unchecked. Using ng-true-value, you can customize the value assigned when the box is checked, such as setting it to 40. Here's how it works with ng-model:

<div class="row" ng-repeat="voce in voices.data">
    <div ng-repeat="cssframework in voce.framewrok">
        <input type="checkbox" ng-model="cssframework.costo[$index]" ng-true-value="voce"/>  
    </div>  
</div>

This setup allows you to access the values of "cssframework.costo" in the controller using console.log($scope.cssframework.costo), which will return an array.

How can I pass ng-model in AngularJS input box without altering it?

https://i.sstatic.net/1qqWu.jpg

Answer №1

Whatever your reasons for needing this logic, this solution covers all the features you mentioned.

Answer №2

Answer №3

Similar questions

How to Make a Material UI Dialog Box Pop Up in ReactJS to Occupy the Entire Screen

What is the process of incorporating a video into a react.js project through the use of the HTML

At what point can we rely on the accuracy and timeliness of Element.getBoundingClientRect?

Mall magnitude miscalculation

A guide to troubleshooting the error 'response.json is not a function' within an async/await function

Encountering an unanticipated DOMException after transitioning to Angular 13

Obtain Value from Function Parameter

Unidentified Angular JS HTML Functions

Controlling the behavior of React components in response to updates

Is there a way to consistently keep the cursor in a single form field using HTML5 and Javascript?

A proposal for implementing constructor parameter properties in ECMAScript

Tips for transferring an AngularJS file using ExpressJS

Finding an element based on its styling attribute, such as its position on the left or right side

Showing chosen option from dropdown menu

Adjusting the field of view of a perspective camera in THREE.JS while maintaining the camera's original distance

Our express.js does not recognize GET requests from routers

Issue with firing Facebook pixel after router.push() in Next.js

Is there a way to integrate my fixed elements with the API call seamlessly?

Vue - Additional loading may be required to manage the output of these loaders

Struggling with implementing Vue.js for making a task list using Bootstrap 5