问题描述
限时送ChatGPT账号..我正在尝试用 Angular 构建一个日托价格计算器.
I'm trying to build a calculator for daycare prices in Angular.
公司特许经营权的每个地点每天都有不同的价格.所以我的想法是构建一个表单,首先是一个允许您选择位置的选择,然后是一系列的复选框.
Every location in the company franchise has separate prices for every day. So my thinking was to build a form, with first a select that allows you to select the location, then a series of checkboxes for the days.
我在从 json 文件中选择正确价格的复选框中遇到 ng-true-value 问题.
I'm having trouble with ng-true-value in the checkboxes selecting the correct prices from my json file.
更新: 添加了 Plunkr:http://plnkr.co/编辑/MDmrqaH1VzLBzjd5eHgT?p=preview
UPDATE: Added 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.
First the select sets formData with a location ID, then I want to use this ID to select the day prices for the matching location and set those to ng-true-value.
我为此使用了 ng-true-value="{{data.bso[formData.location.ID].prices.monday}}"
.这不起作用.
I'm using ng-true-value="{{data.bso[formData.location.ID].prices.monday}}"
for this. This doesn't work.
当我像 ng-true-value="{{data.bso[0].prices.monday}}"
这样手动设置 ID 时,它确实有效.为什么选择的结果没有被ng-true-value拾取?
When I set the ID manually like ng-true-value="{{data.bso[0].prices.monday}}"
it does work. Why is the result of the select not being picked up by ng-true-value?
这是我的json文件:
This is my json file:
$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):
It seems ng-true-value
does not accept non-constant expressions. From the docs(v1.3.0):
某些与 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 方法,您可以在其中分析所有复选框是否为真值或非真值.
An ideal workaround probably would be calling a Controller method on ng-click
or ng-change
inside which you can analyse all the checkboxes for truthy or non-truthy values.
这篇关于AngularJS 复选框动态 ng-true-value 表达式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论