指示文のAngularJSデフォルトの空のオプションを削除

Question

私は、このアプリケーションのcategoryIdによってサブカテゴリをもたらすこのディレクティブを持っています。このカテゴリはサービスと呼ばれ、サブカテゴリはあなただけのために知っています。

OK ディレクティブサービス-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マイクドロップダウン： あなたが見るように、これはディレクティブです：

<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）は1つずつインクリメントされます。 Ex。 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にアングルを付加します。あなたは私がNGリピートとし、NG-オプションをしようとしていますが、 私は両方の問題を抱えていますで見たよう

これは選択数量-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で作業すると、動作しますが、ルートを使用しようとしているときに動作しません。 これは動作しません。

私は、私の見解で、私は

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

を設定しているが、人口ますHTMLで私は

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

$親理由を参照してください選択していることに気づきますか？それを変更しています。

これらの入力をrootScopeに設定する必要があります。フォームを送信する必要があり、ng-modelをrootScopeに送信するように設定していないと、これらの値にアクセスできません。

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

、それが働いていたが、私は$ rooScopeを使用する場合、それはdoesnの：私はこれを追加select要素を構築した後

はまた、私は数量-select.jsディレクティブ

でこれを実行しようとしましたそれは未定義と言います。

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

はありがとう

Answer 1

こんにちはあなたのフィードバックのためにどうもありがとうございました... $rootScopeを使用していないイムと空の問題を修正しました。 私は建築上の間違いが多く、あなたのお勧めに感謝します。 私はディレクティブの使用方法を完全に変更します。

[OK]を、私は 最初の負荷の復帰が、DOMがその時 準備ができていないようです未定義ので、空のオプションが

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






    } 
}; 
}); 

私はidで要素をターゲットにしていたと私はタイムアウトを追加してい解決方法タイムアウトを追加すると、DOMを準備するのに十分な時間が与えられます。 また、属性selected = "selected"を手動で追加しています。選択されたtrueは選択された属性を追加しないため、後で要素全体を選択する必要があるからです。

ありがとうございましたあなたにお薦めがあれば歓迎します。

これは、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>