Trying to Dynamically Bind my "ng-true-value" in Angularjs

Question

I am loading some values from a database and what I'm trying to do here is have a checkbox, load the description and then have 2 text boxes, the first is editable, and the second is readonly.

Both text boxes start with the values loaded from the database, then when the checkbox is checked, the value from the editable text box appears in the readonly text box, when it is unchecked, the readonly checkbox value is 0.

               <div ng-if="condition.ConditionDesc == 'Other'">
                    <div class="col-sm-1 unpad" ><input  type="checkbox" id=OtherCheckbox" ng-disabled="condition.Score_Potential.$invalid && condition.Score_Potential.$invalid" ng-model="condition.ConditionExists" ng-true-value="{{condition.Score_Potential}}" ng-false-value="0"/></div>
                    <div class="col-sm-2 unpad">{{ condition.ConditionDesc }} </div>
                    <div class="col-sm-5 unpad"><textarea id="OtherText" cols="30" placeholder="Please Specify." rows="1"></textarea></div>
                    <div class="col-sm-2"><input type="text" id="" name="" ng-model="condition.Score_Potential" class="form-control" format="number" required /></div>
                    <div class="col-sm-2"><input type="text" id="" name="" ng-model="condition.ConditionExists" class="form-control" readonly="readonly" format="number" required /></div>
                </div>

Whenever I type a number in the editable textbox and then check my checkbox, it only puts the original value of the editable textbox into the readonly textbox. Any ideas of how to fix this?

Blaise · Accepted Answer · 2014-06-06 16:08:53Z

0

You can solve this with some basic pre-processing and post-processing of model data:

Remove ng-true-value and ng-false-value, replace the model with a temporary model, and add a controller:

<input type="checkbox" id=OtherCheckbox" 
       ng-disabled="condition.Score_Potential.$invalid && condition.Score_Potential.$invalid" 
       ng-model="condition.conditionChecked" 
       ng-controller="CheckboxController" />

Controller that sets a temporary model value that is not affected by Score_Potential changes:

var cond = $scope.condition
yourApp.controller('CheckboxController', ['$scope', function($scope) {
    $scope.$watch('condition.ConditionExists', function(conditionExistsValue) {
        cond.conditionChecked = (conditionExistsValue === cond.Score_Potential);
    }
}]);

When saving: conditionally set the value of ConditionExists to Score_Potential based on our temporary model value:

var cond = $scope.condition
cond.ConditionExists = cond.conditionChecked ? cond.Score_Potential : 0;

answered Jun 6, 2014 at 16:08

Blaise

13.6k9 gold badges79 silver badges103 bronze badges

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

3 Comments

Sarah Over a year ago

Thank you so much for the feedback! Ok, bear with me here, I'm very new to Angular, and I'm still having a hard time understanding controllers completely. But I tried adding that controller, but my code was having issues with the "var cond = $scope.condition" line being outside of the controller.

Blaise Over a year ago

Did you already implement the controller with a scope function that submits the changed model to the server? If so, that's the place where you need to add this. If not, you need to put a controller on your <form> element with a scope function that submits the data and put it there. — This is pretty advanced stuff, so if you're having trouble grasping the concepts; these videos really helped me when I was new to AngularJS: egghead.io/technologies/angularjs?page=10

Sarah Over a year ago

Oh ok, that makes sense, yeah I haven't done that yet. Thanks so much! Although I don't totally have it working yet I've made some progress with the help of you answer and will probably look at some of those videos as well.

Collectives™ on Stack Overflow

Trying to Dynamically Bind my "ng-true-value" in Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related