AngularJS复选框动态ng-true-value表达式

Question

我正在尝试为Angular建立一个日托价格计算器.

公司特许经营的每个地点每天都有单独的价格.所以我的想法是建立一个表单,首先是一个选择,允许您选择位置,然后是一系列日期复选框.

我在复选框中选择ng-true-value时遇到麻烦,从我的json文件中选择正确的价格.

更新:添加了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

首先,select使用位置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
                    }
                  }
                ]
              };

Answer 1

它似乎ng-true-value不接受非常量表达式.从文档(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方法,你可以分析所有truthy或非truthy值的复选框.