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=" – Research">
<input check-change type="checkbox" ng-value="(item.product) + ' – Research'">
</label>
</td>
<td>
<label for=" – Implementation">
<input check-change type="checkbox" ng-value="( item.product ) + ' – Implementation'">
</label>
</td>
<td>
<label for=" – Replace">
<input check-change type="checkbox" ng-value="( item.product ) + ' – Replace'">
</label>
</td>
<td>
<label for=" – Request">
<input check-change type="checkbox" ng-value="( item.product ) + ' – Request'">
</label>
</td>
Aucun commentaire:
Enregistrer un commentaire