我正在尝试为Angular建立一个日托价格计算器。
公司专营权中的每个地点每天都有单独的价格。因此,我的想法是构建一个表单,首先选择一个允许您选择位置的表单,然后再选择一系列复选框。
我在从json文件中选择正确价格的复选框中遇到ng-true-value的问题。
更新: 添加了Plunkr:http : //plnkr.co/edit/MDmrqaH1VzLBzjd5eHgT?p=preview
考虑以下代码:
<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
首先,选择集使用位置ID设置formData,然后我要使用该ID选择匹配位置的日价并将其设置为ng-true-value。
我正在ng-true-value="{{data.bso[formData.location.ID].prices.monday}}"为此。这行不通。
ng-true-value="{{data.bso[formData.location.ID].prices.monday}}"
当我手动设置ID时,ng-true- value="{{data.bso[0].prices.monday}}"它确实可以工作。为什么选择的结果没有被ng-true-value接受?
ng-true- value="{{data.bso[0].prices.monday}}"
这是我的json文件:
$scope.data = { "bso": [ { "ID": 0, "title": "Locatie 1", "prices": { "monday": 130, "tuesday": 130, "wednesday": 200, "thursday":130, "friday": 130 } }, { "ID": 1, "title": "Locatie 2", "prices": { "monday": 430, "tuesday": 530, "wednesday": 600, "thursday":990, "friday": 730 } } ] };
似乎ng-true- value不接受非常量表达式。从docs(v1.3.0):
ng-true- value
与ngModel结合使用的某些属性(例如ngTrueValue或ngFalseValue)将仅接受常量表达式。
使用常量表达式的示例包括:
<input type="checkbox" ng-model="..." ng-true-value="'truthyValue'"> <input type="checkbox" ng-model="..." ng-false-value="0">
非常数表达式的示例包括:
<input type="checkbox" ng-model="..." ng-true-value="someValue"> <input type="checkbox" ng-model="..." ng-false-value="{foo: someScopeValue}">
理想的解决方法可能是在其上ng-click或ng-change内部调用Controller方法,您可以分析所有复选框的真实值或非真实值。
ng-click
ng-change