Question

我正在尝试为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

首先，select设置带有位置ID的formData，然后我想使用此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
                    }
                  }
                ]
              };

Answer 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方法，在其中您可以分析所有真值或非真值的复选框。

Answer 2

ng-true-value中的表达式只会被评估一次，因此它不会是动态的。

另一种方法是计算ng-change回调中的值。

请参阅我的前叉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 = {};

Answer 3

另一种方法是延迟创建复选框，直到值准备好（在范围或其他任何方面）。

在我的情况下，当我创建复选框时，我正在通过http加载一个值，该值不在范围内。所以我把它包装在ng-if。

中

static DateTime mExpiryDate = DateTime.Parse("09/29/2015");
public static void Main()
{
    var result = string.Empty;
    var noticeDate = DateTime.Parse("09/05/2015");
    mExpiration_Compute(ref result, noticeDate);
    Console.WriteLine(result);
}

public static void mExpiration_Compute(ref string result, DateTime noticeDate)
{
    DateTime a = noticeDate;
    DateTime b = mExpiryDate;
    TimeSpan ts = b.Subtract(a);
    result = string.Format("You have {0} days to expiry date.", ts.Days);
}

这对我的场景非常有效。你的有点不同，但同样的原则应该适用 - 延迟创建复选框，直到你知道绑定的值为止。

是的，愚蠢的引号似乎是必要的。

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

3 个答案: