web-dev-qa-db-ja.com

AngularJSチェックボックスの動的なng-true-value式

私はAngularでデイケア価格の計算機を構築しようとしています。

会社フランチャイズのすべての場所には、毎日個別の価格があります。したがって、私の考えは、最初に場所を選択できる選択を使用してフォームを作成し、次にその日の一連のチェックボックスを作成することでした。

Jsonファイルから正しい価格を選択するチェックボックスでng-true-valueに問題があります。

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

最初に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を手動で設定すると機能します。なぜselectの結果が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
                    }
                  }
                ]
              };
javascriptjsonangularjscheckbox
18
Squrler

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メソッドを呼び出すことです。このメソッド内では、すべてのチェックボックスを分析して、真の値または非真の値を取得できます。

17
AlwaysALearner

Ng-true-valueの式は1回だけ評価されるため、動的ではありません。

1つの代替アプローチは、代わりに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 = {};
2
runTarm

別のアプローチは、値の準備ができるまで（スコープまたは何でも）チェックボックスの作成を遅らせることです。

私の場合、チェックボックスが作成されたときにスコープにない値を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>

これは私のシナリオでは完璧に機能しました。あなたのものは少し異なりますが、同じプリンシパルが適用されるはずです-バインドされる値が存在するまで、チェックボックスの作成を遅らせますknow.

そして、はい、愚かな引用符が必要なようです。

2
Sam