1

特定の値とタイプを選択し、それを使用して他の呼び出しを行いたい単純なフィルターがあります。これは、私のビューにあるものをよく表したものです (これらのラジオ ボタンを作成するために ng-repeat を使用していません)。

<form>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.today_filter" ng-model="cntrl.filter.filter_value"> Today
</label>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.hour_filter" ng-model="cntrl.filter.filter_value"> Last 
</label>
    <select ng-model="cntrl.filter.hours" ng-options="num for num in cntrl.filter.time_range"></select>
<label> hours</label>
<label>
    <input type="radio" name="ptf" ng-value="cntrl.filter.date_filter" datepicker="" ng-model="cntrl.filter.filter_value">Select a Date
</label>
<button class="btn btn-info float-right" ng-click = "cntrl.refreshData()" >Update</button>
</form>

これは基本的に、今日、過去n数時間、または別の日付を選択できる 3 つのオプションを提供します。これが私のcntrl.

vm.filter = {
        today_filter: {
            type: 'today',
            value: 1
        },
        date_filter: {
            type: 'date',
            value: 2
        },
        hour_filter: {
            type: 'hours',
            value: 3
        },
        hours: 8,
        today: getFormattedDate(vm.current_date),
        time_range: [],
        filter_value: {
            type: 'today',
            value: 1
        }
    };

これで、filter_value( ng-model) をオブジェクトとして設定しましたtype today and value 1。したがって、デフォルトでは、値のラジオボタンcntrl.filter.today_filterが選択されているはずです。他のラジオ ボタンを選択すると、filter_valueそれに応じてオブジェクトが更新されます。もちろん、これは起こっていません。ここで間違っている基本的なことがありますか？これを修正する方法、またはこれに関する別のアプローチに関する指針はありますか?

4

1 に答える 1

1

コードにはいくつか問題があります。

  1. ビューでコントローラーに間違ったエイリアスを使用している (spDashboardCntrl および cntrl)
  2. 同じように見える新しいオブジェクトではなく、実際の同じオブジェクトを初期値として使用します。

明確にするために、以下の実際の例を参照してください。

angular.module('app',[])
.controller('myController', function() {
  var vm = this;
  
  vm.filter = {
        today_filter: {
            type: 'today',
            value: 1
        },
        date_filter: {
            type: 'date',
            value: 2
        },
        hour_filter: {
            type: 'hours',
            value: 3
        },
        hours: 8,
        today: '', //getFormattedDate(vm.current_date),
        time_range: []
    };
 vm.filter.filter_value = vm.filter.today_filter;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController as vm">
    <form>
      <label>
        <input type="radio" name="ptf" ng-value="vm.filter.today_filter" ng-model="vm.filter.filter_value">Today
      </label>
      <label>
        <input type="radio" name="ptf" ng-value="vm.filter.hour_filter" ng-model="vm.filter.filter_value">Last
      </label>
      <select ng-model="vm.filter.hours" ng-options="num for num in vm.filter.time_range"></select>
      <label>hours</label>
      <label>
        <input type="radio" name="ptf" ng-value="vm.filter.date_filter" datepicker="" ng-model="vm.filter.filter_value">Select a Date
      </label>
      <button class="btn btn-info float-right" ng-click="vm.refreshData()">Update</button>
    </form>
    
    {{vm.filter.filter_value}}
  </div>
</div>

于 2016-12-16T07:38:05.883 に答える