AngularJS delete default empty option in directive - angularjs-directive

Question

I have this directive that brings sub-categories by the categoryId in this application the categories are called services and the sub-categories are called services-child( just for you to know ).
ok
The File that contain the directive service-detail.php has:
<services-child serviceid="{{id}}"></services-child>
The directive :
'use strict';
app.directive('servicesChild', function ($window,$state,servChildService) {
return {
require: '^form',
restrict: 'EA',
scope: {
serviceid: '#',
},
templateUrl:'assets/views/partials/service-child.php',
link: function ($scope, $element, $attributes) {
var serviceId = $attributes.serviceid;
$scope.childs = servChildService;
servChildService.loadServiceChilds(serviceId);
$scope.serviceChilds = servChildService.serviceCH;
}
};
});
app.factory('serviceChildResource', ['$resource', function($resource) {
return $resource("/services/serviceChild/:id", {id: '#id'}, {
getChilds: {
method: 'GET'
}
});
}]);
app.service('servChildService', function(serviceChildResource) {
var self = {
'isLoading': false,
'showBlock': true,
'serviceCH': [],
'loadServiceChilds': function(serviceId){
if (!self.isLoading) {
self.isLoading = true;
var params = {
'id': serviceId,
};
self.serviceCH = [];
serviceChildResource.getChilds(params, function(data){
if(data.childs.length > 0){
angular.forEach(data.childs, function(value, key){
self.serviceCH.push(new serviceChildResource(value));
self.isLoading = false;
self.showBlock = true;
});
}else{
self.showBlock = false;
self.isLoading = false; //show the loading.
}
});
}
}
};
return self;
});
Now the services-child view is this service-child.php:
<div class="panel panel-white" ng-show="childs.showBlock">
<div class="panel-heading border-light">
<h4 class="panel-title"><span class="text-bold">Add More Services</span>
</h4>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="sample-table-1">
<thead>
<tr>
<th>Service</th>
<th>Description</th>
<th>Price</th>
<th>Qty.</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="service in serviceChilds">
<td>{{service.name}}</td>
<td ng-bind-html="service.description">
{{service.description}}
</td>
<td>${{service.price}}</td>
<td>
<qty-select ng-hide="{{service.single_service}}"
price="{{service.price}}"
id="{{service.id}}"
indexid = {{$index}}>
</qty-select>
</td>
<td><input type="checkbox" value="{{service.id}}"
ng-model="$root.servCheck[service.id]"
name="servCheckN"/></td>
</tr>
</tbody>
</table>
<div ng-show="childs.isLoading">
<span us-spinner="{radius:10, width:5, length:4, lines:8}"></span>
</div>
</div>
</div>
Ok Now in this directive I have another Directive that has the Dynamic DropDown:
as you see this is the directive:
<qty-select ng-hide="{{service.single_service}}"
price="{{service.price}}"
id="{{service.id}}"
indexid = {{$index}}>
</qty-select>
Now this directive code is this qty-select.js:
'use strict';
app.directive('qtySelect', function ($window,$state,servChildService,$localStorage,$rootScope,$timeout) {
return {
require: '^form',
restrict: 'EA',
scope: {
indexid: '#',
},
templateUrl:'assets/views/partials/qty-select.php',
link: function ($scope, $element, $attributes) {
var i = 1;
while (i < 16) {
$scope.selectObj.push({'value' : $attributes.price * i,
'label' : i + ' (' + $attributes.price * i + ')',
'price' : $attributes.price * i,
'qty' : i,
});
i += 1;
};
console.log($rootScope.priceQty);
}
};
});
So basically what this directive does is creating a select option element
but it shows the price multiply by the index Ex. 1($10) which increment one by one
Ex. 2($20) so the result is something like this: if you pass 10 to the directive in the price attribute it will show:
<select ng-init="$parent.priceQty[indexid] = selectObj[0]"
ng-model="$parent.priceQty[indexid]" ng-change="updatePrice()"
ng-options="option.label for option in selectObj"
class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" style="">
<option value="?"></option>
<option label="1 (15)" value="object:77">1 (15)</option>
<option label="2 (30)" value="object:78">2 (30)</option>
<option label="3 (45)" value="object:79">3 (45)</option>
<option label="4 (60)" value="object:80">4 (60)</option>
<option label="5 (75)" value="object:81">5 (75)</option>
<option label="6 (90)" value="object:82">6 (90)</option>
<option label="7 (105)" value="object:83">7 (105)</option>
<option label="8 (120)" value="object:84">8 (120)</option>
<option label="9 (135)" value="object:85">9 (135)</option>
</select>
Now this all works fine but I don't know how to get ride of the first empty option that angular append to the dropDown.
This is the View directive for select qty-select.php
<select ng-init="$root.priceQty[indexid] = selectObj[0]"
ng-model="$root.priceQty[indexid]" ng-change="updatePrice()"
ng-options="option.label for option in selectObj" >
</select>
<!-- <select ng-model="$root.priceQty[indexid]" ng-change="updatePrice(indexid)">
<option ng-repeat="value in selectObj" value="{{value.value}}"
ng-selected="$index == 1">{{value.label}}</option>
</select> -->
As you see in the I am trying with ng-repeat and with ng-options but
i am having problems with both.
Now if I work with $scope it works but when I am trying to use root
it does not work.
I notice that in my view select i have set
<select ng-init="$root.priceQty[indexid] = selectObj[0]"
but in the html that gets populated I see
<select ng-init="$parent.priceQty[indexid] = selectObj[0]"
$parent why ? is changing it.
and I need to set these input in the rootScope because I have to submit the form and I can no access to those values if I don't set the ng-model to be sent to the rootScope.
Also I tried to do this in the qty-select.js directive
after I build the select element i added this:
$scope.priceQty = $scope.selectObj[0];
and it worked but when I use $rooScope it doesn't work it says undefined.
$rootScope.priceQty = $scope.selectObj[0];
Any Idea?
Thank you

Answer 1

Hi thank you very much for your feedback...
Im not using $rootScope and a fixed the problem with the empty.
I had a lot architectural mistakes and thank you for your recommendations.
I totally change the way of using the directive.
Ok the way I solved the empty option was
'use strict';
app.directive('qtySelect', function ($window,$state,servChildService,$timeout,cartService,$cookies,$rootScope) {
return {
require: '^form',
restrict: 'EA',
scope: {
indexid: '#',
serviId: '#id',
servobj: '=',
},
templateUrl:'assets/views/partials/qty-select.php',
link: function ($scope, $element, $attributes) {
var i = 1;
var index = 0;
$scope.selectObj = [];
$scope.cartArray = [];
while (i < 16) {
$scope.selectObj.push({'value' : $attributes.price * i, //the value of the option tag (obligatory)
'label' : i + ' (' + $attributes.price * i + ')', //the copy (obligatory)
'price' : $attributes.price * i,
'qty' : i,
'serviceId' : $attributes.id,
'index' : index,
});
i += 1;
index += 1;
};
$timeout(function() {
document.getElementById("qty-"+$scope.indexid)[1].selected = true
//add the attribute ng-checked to filter them later.
document.getElementById("qty-"+$scope.indexid)[1].setAttribute("selected", 'selected');
}, 10);
}
};
});
I'm targeting the element by id and I am adding timeout because
the first load return undefined it seems the DOM is not ready
at that point so adding a timeout it give it enough time to the DOM to be ready.
Also I am adding the attribute selected="selected" manually since the selected true does not add the attribute selected and I need it to select later the whole element.
$timeout(function() {
document.getElementById("qty-"+$scope.indexid)[1].selected = true
//addinf manyally the attribute selected
document.getElementById("qty-"+$scope.indexid)[1].setAttribute("selected", 'selected');
}, 10);
Thank you
If you have recommendations are welcome.
This is the html directive:
<select ng-model="priceQty" ng-change="updatePrice(indexid,serviId,this)"
name="priceQty" id="qty-{{indexid}}">
<option ng-repeat="(key, value) in selectObj" value="{{value.price}}"
qty="{{$index+1}}" service-id="{{serviId}}">
{{$index+1}} ({{value.price}})
</option>
</select>