Angular - If checkbox is checked change value

Question

Controller:

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

$scope.servers = data; // get 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" />

What I am trying to do is to change <td>{{data.Virtual.SumCores}}</td> to <td>{{data.Virtual.SumCores/4}}</td> if over subscription is equal to true

Fairly new to angular and I am still learning:

Do I do this in the view or the controller?

What is the best approach?

does the oversubscription apply to the entire repeat or only specific elements? — Claies
– Claies, Commented Sep 23, 2015 at 14:02
Instead of changing the databinding, I would bind the td's to a new set of variables that get recalculated on the ng-change of the checkbox. — Dennisch
– Dennisch, Commented Sep 23, 2015 at 14:02

tymeJV · Accepted Answer · 2015-09-23 14:02:34Z

You can do it in the view - just be sure to give your checkbox a ngModel

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

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

Or, with an ngChange on the checkbox and 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;
    });
}

@CMS -- Controller method is probably more efficient - the view method will get processed each time the $digest cycle is executed (depending on your app - could be a lot).

Collectives™ on Stack Overflow

Angular - If checkbox is checked change value

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related