angularjsjsonangular-bootstrap-toggle

Toggle Switch State Based on JSON data


I am still a noobie to angular dev, I had a couple of proposed solutions to my problem, but didn't realize how to implement them. I am using [Angular Bootstrap Toggle] Switch in my angular expression to control on/off values for multiple parameters.

The state of the toggle (ON/OFF) is based on ng-model="toggleValue", where it expects the toggle value to be the boolean type, i.e. true, false.

Now the data that I import from my database(oracledb) has this parameter "toggleValue" defined as "Y"(True) or "N"(False). How do I make the toggle switch complaint to support the Y/N values?

Solutions thought of:
1) Convert the incoming JSON values from Y to true and N to false.
2) bind ng-model to expressions which evaluate to true if the value is 'Y' else false.
3) Hack Angular Bootstrap toggle JS script. (least preferred)

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>

Solution

  • So I found a couple of solutions may work for this problem. Again I don't necessarily feel these are the most optimum solutions, as regardless we will have to iterate our data object and convert the values of required key: value pair from 'Y' to true and 'N' to false.

    1) ng-init
    I created a parent division over the division where I was required to use these ng-model variables, and reassigned the values of toggleValue with the following code, as ng-init permits using expressions, which ng-model doesn't

    <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)">
    

    Init function in controller:

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

    Pros: Since I am using ng-repeat and pagination, only the scope elements of the current page are changed, and thus more efficient, and iteratively others are changed on page change.
    cons: I also have a search box in my view, which lets you filter the records based on toggleValue parameter (true/false). Now if the filter is applied, it only filters out the current page elements and not all the elements as they are still in "Y" or "N" values.

    2) Iterate the object and swap the value in controller while fetching the data

    This is pretty simple and obvious solution, but obviously not the most efficient one.

    $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;
        });
    

    Similarly, we can convert the data back during any changes/updates made back to server.