尝试在 Angularjs 中动态绑定我的“ng-true-value”

Question

我正在从数据库中加载一些值，我在这里尝试做的是有一个复选框，加载描述，然后有 2 个文本框，第一个是可编辑的，第二个是只读的。

两个文本框都以从数据库加载的值开始，然后当复选框被选中时，可编辑文本框中的值出现在只读文本框中，当它未被选中时，只读复选框值为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>

每当我在可编辑文本框中键入一个数字然后选中我的复选框时，它只会将可编辑文本框的原始值放入只读文本框中。有关如何解决此问题的任何想法？

Answer 1

您可以通过对模型数据进行一些基本的预处理和后处理来解决这个问题：

去掉ng-true-value和ng-false-value，用临时模型替换模型，添加控制器：

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

设置不受 Score_Potential 更改影响的临时模型值的控制器：

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

保存时：根据我们的临时模型值有条件地将 ConditionExists 的值设置为 Score_Potential：

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