mercredi 5 octobre 2016

An angular way to return nested ng-repeat checkboxes with a checked value in Angular 1

I'm searching for a more correct way to structure this working spaghetti code. It returns the desired result value – the name of the dynamic product from the ng-repeat along with a static value (consider level of interest as example).

  • The controller is handling the data (for this example)
  • The build object is used to push '.isChecked' object attributes with a jQuery each function
  • The 'checkChange' directive is being used to toggle the 'isChecked' class on the checkbox input

Ideally: I would like to remove the use of toggling and checking classes in order to compile a return object.

Thanks

Example Code (Controller)Every object has a unique name and multiple unique solutions:

(function() {
    var DataController = function($scope, $http) {
        var vm = this;
        vm.solutions = [{
            "name": "Product Name 1",
            "solutions": [
                { "product": "Product Offering 1" },
                { "product": "Product Offering 2" },
                { "product": "Product Offering 3" },
                { "product": "Product Offering 4" },
                { "product": "Product Offering 5" }
            ]
        }, {
            "name": "Product Name 2",
            "solutions": [
                { "product": "Product Offering A" },
                { "product": "Product Offering B" },
                { "product": "Product Offering C" },
                { "product": "Product Offering D" },
                { "product": "Product Offering E" },
                { "product": "Product Offering f" },
            ]
        }];
        $scope.build = []; // empty array to push checked elems into
        $scope.submit = function(data) {
            $('.isChecked').each(function(i, obj) {
                $scope.build.push(obj[attr='value']); // push into build array
            });
            console.log($scope.build); // success
            ...
        };
    }; // close var DataController
    DataController.register = ['$scope', '$http'];
    angular.module('myApp')
        .controller('DataController', DataController);
}()); // close DataController IFFY

Example Code (Directive)bind checkboxes

.directive('checkChange', function() {
    return {
        restrict: "A",
        scope: false,
        link: function(scope, element, attr) {
            element.bind('change', function() {
                var vm = this;
                $(vm).toggleClass('isChecked');
            });
        }
    };
});

Example Code (HTML)ng-repeat over vm.solutions

<tr ng-repeat="item in data.solutions track by $index">
    <td></td>
    <td>
        <label for=" &ndash; Research">
            <input check-change type="checkbox" ng-value="(item.product) + ' &ndash; Research'">
        </label>
    </td>
    <td>
        <label for=" &ndash; Implementation">
            <input check-change type="checkbox" ng-value="( item.product ) + ' &ndash; Implementation'">
        </label>
    </td>
    <td>
        <label for=" &ndash; Replace">
            <input check-change type="checkbox" ng-value="( item.product ) + ' &ndash; Replace'">
        </label>
    </td>
    <td>
        <label for=" &ndash; Request">
            <input check-change type="checkbox" ng-value="( item.product ) + ' &ndash; Request'">
        </label>
    </td>




Aucun commentaire:

Enregistrer un commentaire