根据从 AngularJS 中的 REST 接收到的值设置单选按钮状态答案

【问题标题】：Set radio button state based on a value received from REST in AngularJS根据从 AngularJS 中的 REST 接收到的值设置单选按钮状态
【发布时间】：2014-05-02 19:48:50
【问题描述】：

我想要实现的是根据AngularJS中从服务器检索到的数据设置单选按钮的状态。

让这更特别的是我需要根据条件显示一个 div（汽车有 1 并且只有 1 分配给它）。如果汽车是所谓的isSingleUser，那么包含单选按钮的div需要可见，否则我们需要隐藏它。

最后，经过一番挣扎，我什至有了实现这一目标的解决方案，但我遇到了一些有趣的障碍，我想与他人分享以供参考，我仍然对替代“解决方案”有一些疑问。

最简单（且有效）的解决方案

我们有 3 辆汽车，汽车服务将根据所选链接获取特定汽车。只有 car1 和 car2 是 isSingleUser，所以 div 应该只对这些汽车可见。您可以看到单选按钮的状态根据 car.isMonitoringAutoEnablementSet JSON 属性。这是我的第一次尝试，但当时我看不到代码工作，我使用了输入的 value 属性，错误的，因为 ng-value 更好。

更具体地说，输入上的value 属性无法将布尔值处理为布尔值（而不是字符串化）因此 Angular 无法将布尔值 false 映射到 "false"，true 值也是如此。如果我使用ng-value，一切都很好。请注意，每辆车的车牌号都在页面上可见。

让我们看看我之后的尝试：
承诺的魔法

我的假设是 car 的数据尚未下载并且模板已渲染在控制器收到数据并将其存储到$scope.car之前

所以我为控制器添加了这段代码：
```
$scope.car = Cars.get({carId: $routeParams.carId})
    .$promise.then(function(car) {
          $scope.automonitoring_state = car.isMonitoringAutoEnablementSet;
          $scope.isSingleUser = car.isSingleUser;
     });
```
并根据新变量修改视图：
```
<h1 class="title">{{car.plateNumber}}</h1>
  <div class='ng-hide' ng-show='isSingleUser'>
    <p class='paragraph'>automatic
      <form name="myForm" class="toggle">
        <input type="radio" name="state" ng-model="automonitoring_state" ng-value="true">on
        <input type="radio" name="state" ng-model="automonitoring_state" ng-value="false">off
        <button class="button" disabled>save</button>
      </form>
    </p>
  </div>
```
注意plateNumbers从页面上消失了，清楚地表明有些问题在获取car 变量的数据时发生。只有新变量有 scope（automonitoring_state 和 isSingleUser）中的值。不知何故，即使我在 promise 的 then 函数中放了一个简单的 console.log()， car 变量不会保存汽车的数据，奇怪... 这个解决方案似乎也是一种解决方法，因为我需要在 scope，但是如果我通过服务保存汽车的状态，我需要同步回我的新 $scope.car 的变量，所以这对我来说绝对是不行的。

借助控制器作用域函数解决

然后我用谷歌搜索和搜索，在 Stackoverflow 上找到了一些建议，等等。嘿，resolve 可以在视图渲染之前将一些变量传递给控制器，这正是我想要的。天真地，我试图从routeProvider 调用一个控制器函数，如下所示：

when('/driver/cars/:carId', {
  templateUrl: 'partials/driver_car.html',
  controller: 'DriverCarController',
  resolve: 'DriverCarController'.resolveCar
})

当然还有将相关功能添加到控制器中：

$scope.resolveCar = {
        car: ['$routeParams', 'Cars',
            function($routeParams, Cars) {
                return Cars.get({
                    carId: $routeParams.carId
                }).then(function(car) {
                    console.log('resolve');
                    return car;
                }, function() {
                    return [];
                });
            }
        ]
};

结果是：什么都没有，根本没有console.log，证明函数没有被调用。

从 resolve 传递变量的另一个可行解决方案 此试用版是上述解决方案的略微修改版本。 Cars 服务仅从 $routeProvider 使用，如果 promise 返回值，则将其保存到 car 变量中。

.when('/driver/cars/:carId', {
  templateUrl: 'partials/driver_car.html',
  controller: 'DriverCarController',
  resolve: {
  car : function (Cars,$route) {
      return Cars.get({carId: $route.current.params.carId})
            .$promise.then(function (response) {
               return response;
            });
          }
        }
})

在控制器中唯一需要更改的是将'car'添加到注入列表并保存 $scope 的参数。

controllers.controller('DriverCarController', ['$scope', '$routeParams','car', 'SecurityEvents',
  function($scope, $routeParams, car, SecurityEvents) {
    $scope.car = car;
    console.log(car);
  }
]);

请查看我的公共 plunkers，您可以尝试我上面描述的每个解决方案：plunkers

感谢任何有关判断最可行方法的帮助，并提供有关每个替代方案的预期用例的一些信息。谢谢！

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-routing

【解决方案1】：

数字 2 与我使用的最相似。

要修复错误，只需像这样更改控制器中的代码：

Cars.get({
   carId: $routeParams.carId
}).$promise.then(function(car) {
     $scope.automonitoring_state = car.isMonitoringAutoEnablementSet;
     $scope.isSingleUser = car.isSingleUser;
     $scope.car = car;
});

我看到从 resolve 调用服务的最大问题是它将控制器与应用路由器紧密耦合，这意味着您的控制器的可重用性较低。

【讨论】：