<script>
$(document).on('change', '.botentry', function () {
if ($(this).val() == "") {
$(this).val(0);
}
});
</script>
and my html code is
<tbody id=" tbody_Buid" ng-if="cstate!=''">
<tr ng-repeat="b in BottomsUpData | filter:{qtr: cqtr, state: cstate} | filter:searchData | orderBy:['-mtmsegment','bizgroup']" style="text-align:center">
<td><div>{{b.bizgroup}}</div></td>
<td><div>{{b.mtmsegment}}</div></td>
<td><div>{{b.family}}</div></td>
<td><div>{{b.series}}</div></td>
<td><div>{{b.formfactor}}</div></td>
<td><div><span ng-if="!b.freeze.m1 || !b.m1.isEdit">{{b.m1.value}}</span><input class="botentry" ng-if="b.freeze.m1 && b.m1.isEdit" ng-model="b.m1.value" ng-blur="buTotCalc()" type="number" /></div></td>
<td><div><span ng-if="!b.freeze.m2 || !b.m2.isEdit">{{b.m2.value}}</span><input class="botentry" ng-if="b.freeze.m2 && b.m2.isEdit" ng-model="b.m2.value" ng-blur="buTotCalc()" type="number" /></div></td>
<td><div><span ng-if="!b.freeze.m3 || !b.m3.isEdit">{{b.m3.value}}</span><input class="botentry" ng-if="b.freeze.m3 && b.m3.isEdit" ng-model="b.m3.value" ng-blur="buTotCalc()" type="number" /></div></td>
<td><div>{{b.m1.value+b.m2.value+b.m3.value}}</div></td>
</tr>
</tbody>
I added this code to avoid entering empty field in input box, but it's not working with AngularJs, Jquery value zero is not binding with angularjs ng-model.
in angular js, you use $scope
:
You don't update the input, you update the model to which the input is bound.
for example:
your html:
<div ng-controller="MyCtrl">
<input type='text' ng-model='input' ng-click="myFunction('some value')">
</div>
your controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.input = 1;
$scope.myFunction = function(value) {
$scope.input = value;
}
}
Create custom directive (check-Empty) as given below and add this directive to your HTML code like this
<tbody id=" tbody_Buid" ng-if="cstate!=''">
<tr ng-repeat="b in BottomsUpData | filter:{qtr: cqtr, state: cstate} | filter:searchData | orderBy:['-mtmsegment','bizgroup']" style="text-align:center">
<td><div>{{b.bizgroup}}</div></td>
<td><div>{{b.mtmsegment}}</div></td>
<td><div>{{b.family}}</div></td>
<td><div>{{b.series}}</div></td>
<td><div>{{b.formfactor}}</div></td>
<td><div><span ng-if="!b.freeze.m1 || !b.m1.isEdit">{{b.m1.value}}</span>
<input class="botentry" ng-if="b.freeze.m1 && b.m1.isEdit" ng-model="b.m1.value" ng-blur="buTotCalc()" type="number" check-Empty /></div></td>
<td><div><span ng-if="!b.freeze.m2 || !b.m2.isEdit">{{b.m2.value}}</span><input class="botentry" ng-if="b.freeze.m2 && b.m2.isEdit" ng-model="b.m2.value" ng-blur="buTotCalc()" type="number" check-Empty /></div></td>
<td><div><span ng-if="!b.freeze.m3 || !b.m3.isEdit">{{b.m.value}}</span><input class="botentry" ng-if="b.freeze.m3 && b.m3.isEdit" ng-model="b.m3.value" ng-blur="buTotCalc()" type="number" check-Empty/></div></td>
</tr>
Add this directive to your code
myApp.directive('checkEmpty', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('change', function () {
if (element.val() == "") {
element.val(0).triggerHandler('input');
}
})
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With