Javascript AngularJS复选框动态ng真值表达式
我在试着建立一个计算器,用来计算美国的日托价格 公司特许经营的每个地点每天都有单独的价格。所以我的想法是构建一个表单,首先是一个select,允许您选择位置,然后是一系列日期复选框 在从json文件中选择正确价格的复选框中,我遇到了ng true value的问题 更新:添加了PRUNKR: 考虑以下代码:Javascript AngularJS复选框动态ng真值表达式,javascript,json,angularjs,checkbox,Javascript,Json,Angularjs,Checkbox,我在试着建立一个计算器,用来计算美国的日托价格 公司特许经营的每个地点每天都有单独的价格。所以我的想法是构建一个表单,首先是一个select,允许您选择位置,然后是一系列日期复选框 在从json文件中选择正确价格的复选框中,我遇到了ng true value的问题 更新:添加了PRUNKR: 考虑以下代码: <p class="kind_section">Choose location</p> <select ng-model="fo
<p class="kind_section">Choose location</p>
<select ng-model="formData.location" ng-options="location.title for location in data.bso"></select>
<p class="kind_section">Select days</p>
<input type="checkbox" ng-model="location.day.mon" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.monday}}" ng-false-value="0">Ma
<input type="checkbox" ng-model="location.day.tue" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.tuesday}}" ng-false-value="0">Di<br />
<input type="checkbox" ng-model="location.day.wed" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.wednesday}}" ng-false-value="0">Wo
<input type="checkbox" ng-model="location.day.thu" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.thursday}}" ng-false-value="0">Do<br />
<input type="checkbox" ng-model="location.day.fri" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.friday}}" ng-false-value="0">Vr
似乎
ng true value
不接受非常量表达式。从:
与ngModel结合使用的某些属性(如ngTrueValue或ngFalseValue)将只接受常量表达式
使用常量表达式的示例包括:
非常量表达式的示例包括:
理想的解决方法可能是在
ng click
或ng change
上调用控制器方法,在该方法中,您可以分析真实值或非真实值的所有复选框。ng真实值中的表达式将只计算一次,因此它不会是动态的
另一种方法是计算ng change回调中的值
请参阅我的叉子以了解完整的示例
在html中:
<input type="checkbox" ng-model="selectedDays.monday" ng-change="calculatePrice()" /> Mon
<input type="checkbox" ng-model="selectedDays.tuesday" ng-change="calculatePrice()" /> Tue <br />
<input type="checkbox" ng-model="selectedDays.wednesday" ng-change="calculatePrice()" /> Wed
<input type="checkbox" ng-model="selectedDays.thursday" ng-change="calculatePrice()" /> Thu <br />
<input type="checkbox" ng-model="selectedDays.friday" ng-change="calculatePrice()" /> Fri
另一种方法是延迟复选框的创建,直到值准备就绪(在范围内或其他任何情况下) 在我的例子中,我是通过http加载一个在创建复选框时不在作用域中的值。所以我把它包在了一个ng if里
<div class="checkbox" ng-if="viewData.conditionId != undefined">
<label>
<input type="checkbox" ng-true-value="{{'\''+ viewData.conditionId + '\''}}" ng-false-value="undefined" ng-model="model.conditionId" required />
I agree
</label>
</div>
我同意
这对我的场景非常有效。您的有点不同,但应该应用相同的原则-延迟复选框的创建,直到您知道绑定的值在那里
是的,愚蠢的引号似乎是必要的。您使用的是什么版本的Angular?在上一个版本中,
ngTrueValue
发生了更改。我正在使用v1.3.0 Beta.13使用ng更改
查看模型是否正在更新。formData
对象是否存在于您的范围内ng select
使用子作用域。它会更新。。我将提供一个Plunkr,hold onAFAIK,ng真值,只解析给定表达式一次。在计算表达式时,formData.location.ID
肯定还没有定义。只是尝试了一下,似乎没有什么不同。我刚刚添加了一个Plunkr:好的,这很有意义。非常感谢。您可以简化报价。请看,这对我也有效,尽管我不需要引号,因为我想要的表达式是true/false,而不是字符串。
<input type="checkbox" ng-model="..." ng-true-value="someValue">
<input type="checkbox" ng-model="..." ng-false-value="{foo: someScopeValue}">
<input type="checkbox" ng-model="selectedDays.monday" ng-change="calculatePrice()" /> Mon
<input type="checkbox" ng-model="selectedDays.tuesday" ng-change="calculatePrice()" /> Tue <br />
<input type="checkbox" ng-model="selectedDays.wednesday" ng-change="calculatePrice()" /> Wed
<input type="checkbox" ng-model="selectedDays.thursday" ng-change="calculatePrice()" /> Thu <br />
<input type="checkbox" ng-model="selectedDays.friday" ng-change="calculatePrice()" /> Fri
$scope.calculatePrice = function(){
$scope.formData.location.day = {};
angular.forEach($scope.selectedDays, function (selected, day) {
if (selected) {
$scope.formData.location.day[day.slice(0, 3)] = $scope.data.bso[$scope.formData.location.ID].prices[day];
}
});
}
$scope.selectedDays = {};
<div class="checkbox" ng-if="viewData.conditionId != undefined">
<label>
<input type="checkbox" ng-true-value="{{'\''+ viewData.conditionId + '\''}}" ng-false-value="undefined" ng-model="model.conditionId" required />
I agree
</label>
</div>