当前位置: 首页 > 面试题库 >

AngularJS复选框动态ng-真值表达式

东门楚
2023-03-14
问题内容

我正在尝试为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}}"为此。这行不通。

当我手动设置ID时,ng-true- value="{{data.bso[0].prices.monday}}"它确实可以工作。为什么选择的结果没有被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
                    }
                  }
                ]
              };

问题答案:

似乎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-clickng-change内部调用Controller方法,您可以分析所有复选框的真实值或非真实值。



 类似资料:
  • 问题内容: 对于我正在编写的指令的需要,我必须动态构造ng-options表达式。这是我尝试过的。 在我的指令中: 在我的html模板中: 这将导致ng-options使用正确的表达式“列表中l的l.name”,但不会显示选项。 拜托,有什么主意吗? 问题答案: 更改您的代码,使其看起来像这样(使用javascript来选择您的媒体资源):

  • 问题内容: 我正在尝试以减轻痛苦的适当方式进行操作,但是我无法弄清楚如何处理ng-model并将其绑定到所选列表等,而且我需要在以后填充该列表并保留所选对象在里面。 每次填充列表时,我都必须覆盖类别,因为它将从服务器中拉出。 所以我想我需要数组,第二个数组将容纳所选对象? 如果我是对的,如何预选复选框? 我是否需要ng-click命令调用自定义函数才能将所选对象存储在另一个数组中? 我需要在复选框

  • 我有一个WebGrid,它显示我表格中的值和一个编辑按钮。当用户单击此按钮时,会出现一个弹出表单或对话框表单,其中填充了我前面提到的同一个表中的值。 我已经设法格式化日期值,现在有兴趣格式化从我的表中显示在复选框中的布尔值(true/false)。目前,它显示为一个文本框,值为true或false。 以下是我的代码的一部分: 下面是我的html的一部分 值标记和支付是布尔值。现在,我打算将类型更改

  • 你好,我是一个学生,我的项目是制作一个应用程序的android工作室。 我只是个初学者,所以每件事都很难:( 这是我的问题。 我动态创建的复选框取决于当前。 如果用户单击btnEx按钮,我想获得finalMemberTag。 但是在这段代码中,当我单击btnEx时,finalMemberTag为空。 如果用户单击复选框,我希望将复选框的文本添加到FinalMemberTag中。并且复选框未选中,则

  • 问题内容: 通过某种方式,通过Angular的魔力,如果您使用并提供一个布尔值,则如果布尔值是true,则您的复选框将被选中,如果布尔值是true,则未选中。 尽管仅此一项就让人感到莫名其妙,但我实际上是在尝试反转选中状态,因为与todo示例不同,后者意味着选中了复选框,而我的模型更像。 不幸的是,我的第一个猜测没有用: 我所处的位置已经决定了模型,因此我无法更改它,也不必在客户端上对其进行按摩(

  • 问题内容: 随着我使用的方式如下: 我想知道是否可以使用该表达式执行与此类似的操作: 因此,无论何时不同于或使用并避免指定每个值? 问题答案: 使用嵌套的嵌入式if-then语句( 三元运算符 ) 例如 : 并确保 您的同事可读 :)