根據從AngularJS中的REST接收的值設置單選按鈕狀態

Question

我想實現的是根據從AngularJS中從服務器檢索的數據設置單選按鈕的狀態。

使這個更特別的是，我需要根據條件顯示一個div（汽車分配了1個，只有1個分配給它）。 如果汽車是所謂的isSingleUser ，則div包含的單選按鈕需要可見，否則我們需要隱藏它。

最后，經過很多努力，我什至有解決方案來實現這一目標，但是我遇到了一些有趣的障礙，想與其他人分享以供參考，並且我對替代性“解決方案”還有一些疑問。

1. 最簡單（且有效）的解決方案

   我們有3輛車，汽車服務會根據選擇的鏈接獲取特定的車。 只有car1和car2是isSingleUser因此div僅對那些汽車可見。 您可以看到單選按鈕的狀態根據car.isMonitoringAutoEnablementSet JSON屬性而改變。 這是我的第一次嘗試，但是當時我看不到代碼在工作，我錯誤地使用了輸入的value屬性，因為ng-value更好。

   更具體地說，輸入的value屬性不能將布爾值作為布爾值（且未進行字符串化）處理，因此angular無法將布爾值false映射為"false"並且true值也是true 。 如果我使用ng-value ，一切都很好。 請注意，每輛車的plateNumber在頁面上可見。

   讓我們看看我后來嘗試了什么：

2. 充滿希望的魔術

   我的假設是，尚未下載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 ）。 即使我以某種方式將一個簡單的console.log()放在了promise的then函數中， car變量也不會保存汽車的數據，奇怪的是……這種解決方案似乎也可以解決，因為我需要定義new scope變量，但是如果我通過服務保存汽車的狀態，則需要將新變量同步回$scope.car因此這對我來說絕對是不行的。

3. 借助控制器作用域函數解決

   然后我在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 ，證明該函數沒有被調用。

4. 通過傳遞來自resolve的變量的另一個可行解決方案此試用版是上述解決方案的略微修改版本。 僅在$routeProvider使用Cars服務，如果$routeProvider返回值，則將其保存到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); } ]); 

請查看我的公共小插曲，您可以嘗試我上面描述的每種解決方案：小插曲

對於在最可行的方法之間進行判斷，提供有關每種替代方案的預期用例的一些信息，我們將不勝感激。 謝謝！

Answer 1

2號與我使用的最相似。

要修復該錯誤，只需在控制器中更改代碼，如下所示：

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

我從解決方案中調用服務時看到的最大問題是，它將控制器與應用路由器緊密耦合，這意味着您的控制器的可重用性較差。