ng-model不適用於JSON對象作爲值的角度單選按鈕

Question

我有一個簡單的過濾器，我要選擇一個特定的值並使用該過濾器進行其他調用。這是我的觀點（我不使用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> 

這基本上給了我3個選項，我可以選擇今天，或最後n小時或其他日期。以下是我的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對象應該相應更新。當然這不會發生。這裏有一些基本的東西是錯的嗎？任何關於如何解決這個問題的指針或者對此有不同的方法？

Answer 1

有幾件事你的代碼錯誤：

1. 您使用您的控制器錯誤aliasses在您的視圖（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>