AngularJS чекбокс динамическое выражение ng-true-value

17

Я пытаюсь построить калькулятор для дневных цен в Angular.

Каждое место в франшизе компании имеет отдельные цены за каждый день. Поэтому я думал, что нужно создать форму, сначала выбрать, которая позволяет вам выбрать местоположение, а затем серию флажков для дней.

У меня возникают проблемы с ng-true-value в флажках, которые выберете правильные цены из моего json файла.

UPDATE: Добавлен 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

Сначала выберите set formData с идентификатором местоположения, затем я хочу использовать этот идентификатор, чтобы выбрать дневные цены для соответствующего местоположения и установить их для ng-true-value.

Я использую ng-true-value="{{data.bso[formData.location.ID].prices.monday}}" для этого. Это не работает.

Когда я устанавливаю идентификатор вручную, как 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
                    }
                  }
                ]
              };
  • 0
    Какую версию Angular вы используете? В последнем было изменение ngTrueValue .
  • 0
    Я использую v1.3.0 Beta.13
Показать ещё 3 комментария
Теги:
checkbox

3 ответа

17
Лучший ответ

Кажется, что 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}">

Идеальный обходной путь, вероятно, вызовет метод Controller на ng-click или ng-change, внутри которого вы сможете проанализировать все флажки для правдивых или непрактичных значений.

Поделиться
  • 0
    Просто попробовал это, и это, кажется, не имеет значения. Я только что добавил Plunkr: plnkr.co/edit/MDmrqaH1VzLBzjd5eHgT?p=preview
  • 0
    Хорошо, это имеет смысл. Спасибо!
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>

Это отлично сработало для моего сценария. Ваш немного отличается, но тот же самый принцип должен применяться - задержка создания флажка до тех пор, пока вы не узнаете, что связанное значение существует.

И да, кажется, нужны глупые кавычки.

Поделиться
  • 1
    Вы можете упростить кавычки. См. Stackoverflow.com/a/29019232/4297364
  • 0
    Это сработало и для меня, хотя мне не нужны были кавычки, потому что выражения, которые я хотел, были true / false, а не строки.
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 = {};
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню