Question

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

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

最后，在经历了很多努力之后，我甚至有了实现这一目标的解决方案，但是我遇到了一些有趣的障碍，我想与他人分享以供参考，我仍然对替代“解决方案”有一些疑问。

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

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

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

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

我的假设是汽车的数据尚未下载并且模板已呈现在控制器收到数据并将其存储到$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所以这个对我来说绝对不行。

借助控制器范围功能解决

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

从解析传递变量的另一个有效解决方案该试验是上述解决方案的略微修改版本。 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

对于在最可行的方法之间进行判断，提供有关每种替代方案的预期用例的一些信息，我们对此表示赞赏。谢谢！

Answer 1

2号与我使用的最相似。

要修复错误，只需更改控制器中的代码，如下所示：

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

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

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

1 个答案: