Angular js input box how to pass ng-model without change it?

Question

i am trying to push an ng-model value inside an ng-controller array, using the input box.

It seems that when i check the box the ng-model propriety change:

HERE THE PROBLEM

I just want that ng-model propriety won't change when the input is checked, here my code

json model

[
 {
    "nomeservizio" : "Frameworks",
    "framewrok":[
        {
            "name":"nessuno",
            "costo": 40
        },
        {
            "name":"bootstrap",
            "costo": 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.costo"  ng-change="AggiornaTotale({{cssframework.costo}})"/>  
        <span>{{cssframework.name}}........<b>{{cssframework.costo | currency}}</b></span>
    </div>  
</div>

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

JS INSIDE CONTROLLER

    $scope.AggiornaTotale = function(param) {
    $scope.selectedVoices = [];
    $scope.selectedVoices.push(param);
}

Why do you want this illogical behavior? I think you are on the wrong way to make work what you try to. Please explain it with such more details. — lin
– lin, Commented Feb 19, 2017 at 14:58
ng-model on a checkbox is not the same as the value for that checkbox. It is used to track the checked state. Your costo properties contain values — charlietfl
– charlietfl, Commented Feb 19, 2017 at 14:59
@lin i'm trying to pass the cssframework.costo value inside the controller, but without that mess in the images above — Pds Ink
– Pds Ink, Commented Feb 19, 2017 at 15:35

lin · Accepted Answer · 2017-02-19 16:07:54Z

1

Well this solution provides:

multiple value from checkboxes and inputs inside an array
Values are stored to the $scope.selectedVoices as array when clicking the input

Why ever you want that kind of logic. This solution provides all stuff you talked about.

    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>

answered Feb 19, 2017 at 16:07

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pds Ink Over a year ago

Cool! thankyou, i was confused by documentation in angular who want that true and false propriety, i understand that i not need to pass the same object of framework propriety

Dominik Ruczyński · Accepted Answer · 2017-02-19 16:04:27Z

1

Model Name for value and checkbox model should not be the same.

when you change checkbox - the model inside cssframework object also is updated.

Please try something like that (look at model in 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>

At the end i think that ng-model in checkbox is unnecessary. You don`t use it in that example.

answered Feb 19, 2017 at 16:04

Dominik Ruczyński

811 silver badge7 bronze badges

1 Comment

Pds Ink Over a year ago

thankyou, i was a bit confused by ng-model and checkboxes true false propriety

Ajit Soman · Accepted Answer · 2017-02-19 16:31:01Z

1

Basically what checkbox box does is that on check it makes ng-model value true and on uncheck ng-model value false. You can use ng-true-value to set value says 40 for check box when it is checked. Along with this used ng-model value as shown below:

 <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>

So that when to get the value of "cssframework.costo" in controller like this console.log($scope.cssframework.costo) you will get a array.

edited Feb 19, 2017 at 16:31

answered Feb 19, 2017 at 16:20

Ajit Soman

4,0693 gold badges26 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular js input box how to pass ng-model without change it?

3 Answers 3

Why ever you want that kind of logic. This solution provides all stuff you talked about.

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Why ever you want that kind of logic. This solution provides all stuff you talked about.

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related