AngularJS 复选框动态 ng-true-value 表达式 [英] AngularJS checkbox dynamic ng-true-value expression

问题描述

我正在尝试用 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屋！