根据从 Angular JS 中的 REST 接收的值设置单选按钮状态

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

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

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

1. 最简单(且有效(的解决方案

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

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

   让我们看看我之后尝试了什么：

2. 充满希望的魔力

   我的假设是尚未下载汽车数据并呈现模板在控制器收到数据并将其存储到$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>
   

   请注意，板号从页面上消失了，清楚地表明存在一些问题在获取 car 变量的数据时发生。只有新变量具有scope中的值(automonitoring_state 和 isSingleUser (。不知何故，即使我在承诺的 then 函数中放了一个简单的console.log()， car变量不会保存汽车的数据，奇怪...此解决方案似乎也是一种解决方法，因为我需要在 scope，但是如果我通过服务保存汽车的状态，我需要同步回我的新变量到$scope.car所以这个对我来说绝对是不行的。

3. 借助控制器作用域功能进行解析

   然后我用谷歌搜索了又谷歌，在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，证明没有调用该函数。

4. 从 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

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