ng-if不適用於選擇ngmodel值

Question

Iam正在研究離子項目。這裏Iam試圖顯示一些關於選項選擇的數據。我已經編寫代碼的方式是，當用戶選擇所有3個選項時，表單必須與一些數據一起出現。我已經將ngmodel用於3個選擇選項，並且在選擇第3個選擇選項之後，應該出現表單，因爲我在ng-if中使用了第3個選擇選項ng模型作爲div標記。但它不是working.Below是我的代碼：

<div class="row form-group" ng-controller="myProfileCtrl"> 
 
       <div class="col-md-3 col-sm-4 col-xs-6 margin1"> 
 
        <select class="form-control" ng-change="loadtypes()" ng-model="selectedIndustry" ng-options="industry for industry in name"> 
 
         <option value="">Select Industry</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-3 col-sm-4 col-xs-6 margin1"> 
 
        <select class="form-control" ng-change="loadProducts()" ng-model="selectedtype" ng-options="make_year.make_year for make_year in makeYear"> 
 
         <option value="">Select Type</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-3 col-sm-4 col-xs-6 margin1"> 
 
        <select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="car_model.car_model for car_model in carModel"> 
 
         <option value="">Select Product</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
      <!--Table or div--> 
 
      
 
      <div ng-if="selectedProduct"> 
 
       <form class="form-group"> 
 
        <div class="row"> 
 
         <div class="col col-33"> 
 
          <b>Service Issue</b> 
 
         </div> 
 
         <div class="col col-33"> 
 
          <b> Tick</b> 
 
         </div> 
 
         <div class="col col-33"> 
 
          <b> Cost</b> 
 
         </div> 
 
        </div> 
 
        <div class="row" ng-repeat="services in serviceData" style="margin-bottom:5px;"> 
 
         <div class="col col-33"> 
 
          <label>{{services.services}}</label> 
 
         </div> 
 
         <div class="col col-33"> 
 
          <input type="checkbox" value="" ng-model="checks[$index]" /> 
 
         </div> 
 
         <div class="col col-33"> 
 
          <input class="form-control" type="text" style="width:100px;" ng-model="inputs[$index]" /> 
 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col col-50"> 
 
          <b>Service Request</b> 
 
         </div> 
 
         <div class="col col-50"> 
 
          <b> Tick</b> 
 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col col-50"> 
 
          <label>First Response</label> 
 
         </div> 
 
         <div class="col col-50"> 
 
          <input type="checkbox" ng-model="ser.firstResponse" /> 
 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col col-50"> 
 
          <b>Location</b> 
 
         </div> 
 
         <div class="col col-50"> 
 
          <input class="form-control" list="places" name="location" ng-model="ser.location" /> 
 
          <datalist id="places"> 
 
           <option value="Kochi-Kerala"> 
 
            <option value="Pune-Maharastra"> 
 
             <option value="Bangalore-Karnataka"> 
 
              <option value="Hyderabad-Telangana"> 
 
          </datalist> 
 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col col-50"> 
 
          <b>Resolution Time</b> 
 
         </div> 
 
         <div class="col col-50"> 
 
          <input type="number" class="form-control" min="1" ng-model="ser.resolution" /> 
 

 
         </div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="col col-50"> 
 
          <b>Prioritized preferred partners</b> 
 
         </div> 
 
         <div class="col col-50"> 
 
          <input type="checkbox" ng-model="ser.partners" /> 
 
         </div> 
 
        </div> 
 

 
       </form> 
 
       <button type="button" class="btn btn-primary" ng-click="add()">Save</button> 
 

 
      </div>

如何顯示的數據我n在angularjs中選擇選項後的表單？

Answer 1

你會寫carModel的價值，因爲我有我的價值和確定測試你的代碼，看看HTML：

<select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="item.label for item in items"> 
    <option value="">Select Product</option> 
</select> 
<div ng-if="selectedProduct"> 
    mozhdeh 
</div> 

和控制器：

$scope.items = [{ 
    id: 1, 
    label: 'aLabel', 
    subItem: { name: 'aSubItem' } 
}, { 
    id: 2, 
    label: 'bLabel', 
    subItem: { name: 'bSubItem' } 
}];