ng-model 不适用于以 JSON 对象作为值的 angular 单选按钮

Question

我有一个简单的过滤器，我想在其中 select 一个特定的值和类型，并使用它进行其他调用。这是我的观点的近似表示（我没有使用 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 小时或其他日期select。这是我的 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 的单选按钮应该是 selected。当我 select 其他单选按钮时，filter_value 对象应该相应地更新。当然这不会发生。这里有一些基本的错误吗？有关如何解决此问题或对此采取不同方法的任何指示？

Answer 1

您的代码有一些问题：

您在视图中使用了错误的控制器别名（spDashboardCntrl 和 cntrl）
使用实际相同的对象作为初始值，而不是看起来相同的新对象。

为清楚起见，请参阅下面的工作示例。

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>

ng-model 不适用于以 JSON 对象作为值的 angular 单选按钮

ng-model not working for angular radio buttons with JSON object as values

angularjs

angular-ngmodel

angularjs-ng-value