AngularJS удалить стандартную пустую опцию в директиве

Question

У меня есть эта директива, которая приводит к подкатегориям категорииId в этом приложении, категории называются службами, а подкатегории называются сервисами-дочерними (только для вас).

ОК Файл, который содержит директиву сервис-detail.php имеет:

<services-child serviceid="{{id}}"></services-child> 

директива:

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

Теперь вид услуг, ребенок этот сервис-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> 

ОК Теперь в этой директиве у меня есть еще одна директива, в которой есть Dyna микрофонный DropDown: , как вы видите, что это директива:

<qty-select ng-hide="{{service.single_service}}" 
    price="{{service.price}}" 
    id="{{service.id}}" 
    indexid = {{$index}}> 
</qty-select> 

Теперь эта директива код это кол-во-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); 

    } 
}; 
}); 

Поэтому в основном то, что эта директива делает создает элемент выбора опции , но он показывает, что цена умножается на индекс Ex. 1 ($ 10), которые увеличиваются один на один Пример. 2 ($ 20), так что получается нечто вроде этого: если вы пройдете 10 к директиве по цене атрибута он будет показывать:

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

Теперь это все работает нормально, но я не знаю, как получить поездку из первый пустой параметр, который угловой добавить в dropDown.

Это View директива для выбора Кол-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> --> 

Как вы видите, в я пытаюсь с нг-повтора и нг-вариантов, но я имею проблемы с обоими.

Теперь, если я работаю с $ scope, он работает, но когда я пытаюсь использовать root , он не работает.

я замечаю, что на мой взгляд, выбрать я поставил

<select ng-init="$root.priceQty[indexid] = selectObj[0]" 

но в HTML, который получает заселенной я вижу

<select ng-init="$parent.priceQty[indexid] = selectObj[0]" 

$ родителю почему? меняет его.

, и мне нужно установить эти входные данные в rootScope, потому что я должен отправить форму, и я не могу получить доступ к этим значениям, если я не буду устанавливать ng-модель для отправки в rootScope.

Кроме того, я пытался сделать это в Кол-select.js директивы

после того как я построить выберите элемент Я добавил это:

$scope.priceQty = $scope.selectObj[0]; 

, и она работала, но когда я использую $ rooScope это Безразлично Работа не говорит о неопределенности.

$rootScope.priceQty = $scope.selectObj[0]; 

Любая идея?

Спасибо

Answer 1

Привет Большое спасибо за отзыв ... Im не используя $rootScope и фиксированный проблема с пустым. У меня было много архитектурных ошибок и спасибо за ваши рекомендации. Я полностью изменяю способ использования директивы.

Ok путь я решил пустой вариант был

'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); 






    } 
}; 
}); 

Я нацеливание элемента по идентификатору и я добавляю тайм-аут, потому что первого возвращение нагрузки не определенно, что кажется DOM не готов в том, что так что добавление тайм-аута дает ему достаточно времени для DOM, чтобы быть готовым. Также я добавляю атрибут selected = "selected" вручную, так как выбранное значение true не добавляет выбранный атрибут, и мне нужно его, чтобы потом выбрать весь элемент.

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

Спасибо Если у вас есть рекомендации приветствуются.

Это HTML директива:

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