根据 JSON 数据切换开关状态

Question

我仍然是 angular 开发人员的菜鸟，我有几个针对我的问题的建议解决方案，但没有意识到如何实施它们。我在我的 angular 表达式中使用 [Angular Bootstrap Toggle] Switch 来控制多个参数的 on/off 值。

toggle(ON/OFF)的状态是基于ng-model="toggleValue"，它希望toggle的值是boolean类型，即true，false。

现在，我从我的数据库 (oracledb) 导入的数据将此参数 "toggleValue" 定义为 "Y"(True) 或 "N"(False)。如何使拨动开关投诉支持 Y/N 值？

想到的解决方案：
1) 将传入的 JSON 值从 Y 转换为 true，将 N 转换为 false。
2) 将 ng-model 绑定到表达式，如果值为 'Y' 则值为 true，否则为 false.
3) 破解 Angular Bootstrap 切换 JS 脚本。（最不喜欢）

View Screenshot

Fiddle Link: https://jsfiddle.net/3gt64xz8/1/

<toggle ng-model="item.SHIP_FROM_STORE_IND" aria-label="SFS Switch" size="btn-xs"></toggle>

Answer 1

所以我发现有几个解决方案可能适用于这个问题。同样，我不一定觉得这些是最佳解决方案，因为无论如何我们都必须迭代我们的数据对象并将所需键的值转换：值对从 'Y' 到 true 和 'N' 到 false .

1) ng-init
我在需要使用这些 ng-model 变量的分区上创建了一个父分区，并使用以下代码重新分配了 toggleValue 的值，因为 ng-init 允许使用表达式，而 ng-model 不允许

<div ng-init="item.SHIP_FROM_STORE_IND = init(item.SHIP_FROM_STORE_IND);
 item.BOPIS_ENABLED_IND=init(item.BOPIS_ENABLED_IND); 
 item.BOSTS_ENABLED_IND=init(item.BOSTS_ENABLED_IND)">

控制器中的初始化函数：

$scope.init = function(value) {
$scope.testInput= (value=='Y')? true:false;
return $scope.testInput;
}

优点：由于我使用的是 ng-repeat 和分页，因此只有当前页面的范围元素发生变化，因此效率更高，并且在页面变化时迭代地更改其他元素。
缺点：我的视图中还有一个搜索框，可让您根据 toggleValue 参数 (true/false) 过滤记录。现在，如果应用过滤器，它只会过滤掉当前页面元素，而不是所有元素，因为它们仍在 "Y" 或 "N" 值中。

2) 迭代对象并在获取数据时交换控制器中的值

这是一个非常简单明了的解决方案，但显然不是最有效的解决方案。

$scope.items = storeFactory.getRecords().query(
    function(response) {
        $scope.items=response;
        $scope.totalItems = $scope.items.length;
        for (var i=0, len=$scope.totalItems; i<len; i++) {
            $scope.items[i].toggleValue = ($scope.items[i].SHIP_FROM_STORE_IND=='Y')? true:false;
        }

    },
    function(response) {
        $scope.waitMessage = "Error: "+response.status + " " + response.statusText;
    });

同样，我们可以在任何 changes/updates 返回服务器的过程中将数据转换回来。

根据 JSON 数据切换开关状态

Toggle Switch State Based on JSON data

json

angularjs

angular-bootstrap-toggle