AngularJS 复选框动态 ng-true-value 表达式
Posted
技术标签:
【中文标题】AngularJS 复选框动态 ng-true-value 表达式【英文标题】:AngularJS checkbox dynamic ng-true-value expression 【发布时间】:2014-09-05 16:14:41 【问题描述】:我正在尝试在 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
首先选择将 formData 设置为位置 ID,然后我想使用此 ID 选择匹配位置的日价格并将其设置为 ng-true-value。
我为此使用ng-true-value="data.bso[formData.location.ID].prices.monday"
。这不起作用。
当我像 ng-true-value="data.bso[0].prices.monday"
这样手动设置 ID 时,它确实有效。为什么选择的结果没有被ng-true-value拾取?
这是我的 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
]
;
【问题讨论】:
您使用的是哪个版本的 Angular?上一个ngTrueValue
有变化。
我使用的是 v1.3.0 Beta.13
使用ng-change
查看模型是否正在更新。 formData
对象是否存在于您的范围内? ng-select
使用子作用域。
它确实更新了.. 我要提供一个 Plunkr,等等
AFAIK,ng-true-value 只解析给定的表达式一次。在评估表达式时,formData.location.ID
肯定仍然是未定义的。
【参考方案1】:
似乎ng-true-value
不接受非常量表达式。来自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 方法,您可以在其中分析所有复选框的真实值或非真实值。
【讨论】:
刚刚试了一下,好像没什么区别。我刚刚也添加了一个 Plunkr:plnkr.co/edit/MDmrqaH1VzLBzjd5eHgT?p=preview 好的,有道理。谢谢!【参考方案2】:另一种方法是延迟复选框的创建,直到值准备好(在范围或其他方面)。
在我的情况下,我通过 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>
这非常适合我的场景。你的有点不同,但应该适用相同的原则 - 延迟创建复选框,直到你知道绑定的值在那里。
是的,愚蠢的引号似乎是必要的。
【讨论】:
您也许可以简化引号。见***.com/a/29019232/4297364 这也适用于我,虽然我不需要引号,因为我想要的表达式是真/假,而不是字符串。【参考方案3】:ng-true-value 中的表达式只会被评估一次,因此它不会是动态的。
另一种方法是计算 ng-change 回调中的值。
完整示例请查看我的 fork http://plnkr.co/edit/9zYS3OZ0sSkXX9rHwcgv?p=preview。
在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
在控制器中:
$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 = ;
【讨论】:
以上是关于AngularJS 复选框动态 ng-true-value 表达式的主要内容,如果未能解决你的问题,请参考以下文章