Feldwert mit AngularJS zurücksetzen

Question

Ich habe ein Problem mit AngularJS. Ich habe 3 Felder (Site, Periode, Release). Ich klicke zuerst auf Site [01], das Feld [02] erscheint. Wenn ich auf Periode [02] klicke, erscheint das Feld Freigabe [03]. OK. Aber wenn ich die Site ändern [CHANGE], die Felder Periode und Release müssen die beschlagnahmten Informationen entfernen (tatsächlich ändern sich die Felder nicht). Danke im Voraus für Ihre Antwort.

view.html

<div class="col-md-4" ng-show="sites.length > 1"> 
       <label for="siteId">{{'ler.todo.form.site' | translate}}</label> 
       <ui-select id="siteId" name="siteId" ng-model="siteId" on-select="onSelected($item)" > 
        <ui-select-match placeholder="Select a site"> 
         {{$select.selected.label}} 
        </ui-select-match> 
        <ui-select-choices 
          repeat="value.id as value in sites | filter: {label: $select.search}"> 
         {{value.label}} 
        </ui-select-choices> 
       </ui-select> 
      </div> 
      <div class="col-md-4" ng-hide="sites.length > 1 "> 
       <button class="btn" >{{sites[0].label}}</button> 
      </div> 
      <div class="col-md-4" ng-show="periods.length > 1"> 
       <label for="siteId">{{'ler.todo.form.period' | translate}}</label> 
       <ui-select id="period" name="period" ng-model="period" on-select="onSelectedPeriod($item)" > 
        <ui-select-match placeholder="Select a Period"> 
         {{$select.selected | date : "MMM yyyy"}} 
        </ui-select-match> 
        <ui-select-choices 
          repeat="value in periods "> 
         {{value | date : "MMM yyyy"}} 
        </ui-select-choices> 
       </ui-select> 

      </div> 
      <div class="col-md-4" ng-hide="periods.length > 1 || periods === undefined || periods.length === 0"> 
       <button class="btn right margin-btn-top" >{{period | date : "MMM yyyy"}}</button> 
      </div> 

      <div class="col-md-4" ng-show="releases.length > 1"> 
       <label for="siteId">{{'ler.todo.form.release' | translate}}</label> 
       <ui-select id="release" name="release" ng-model="release" on-select="onSelectedRelease($item)" > 
        <ui-select-match placeholder="Select a Release"> 
         {{$select.selected | date : "dd/MM/yyyy - hh:mm a"}} 
        </ui-select-match> 
        <ui-select-choices 
          repeat="value in releases"> 
         {{value | date : "dd/MM/yyyy - hh:mm a"}} 
        </ui-select-choices> 
       </ui-select> 

      </div> 
      <div class="col-md-4" ng-hide="releases.length > 1 || releases === undefined || releases.length === 0"> 
       <button class="btn right margin-btn-top" >{{release | date : "dd/MM/yyyy - hh:mm a"}}</button> 
      </div> 

controller.js

$scope.sites = sites; 
$scope.currentTs = null; 
$scope.currentReporting = null; 
$scope.selectedSiteId = null; 
$scope.current = {}; 
var firstEnter = true; 

$scope.onSelected = function (selectedItem) { 

    Dao.TechnicalStatus.historyPeriod({'id' : selectedItem.id}).$promise.then(function (periods) { 
     // for tabs to be hidden 
     $scope.currentTs = null; 
     $scope.periods = periods; 
     $scope.selectedSiteId = selectedItem.id; 
     if(periods.length === 1){ 
      $scope.period = periods[0]; 
      $scope.onSelectedPeriod(periods[0]); 
     } 
    }, function() { 
    }); 
}; 

$scope.onSelectedPeriod = function (selectedItem) { 

    Dao.TechnicalStatus.release({'id' : $scope.selectedSiteId, 'month': selectedItem}).$promise.then(function (releases) { 
     // for tabs to be hidden 
     $scope.releases = releases; 
     $scope.selectedPeriod = selectedItem; 
     $scope.currentTs = null; 
     if(releases.length === 1){ 
      $state.go('techStatusHistory', {'siteId': $scope.selectedSiteId, 'period': selectedItem, 'release': releases[0]}); 
      $scope.releases = releases[0]; 
      $scope.onSelectedRelease(releases[0]); 
     } 
    }, function() { 

    }); 
}; 

$scope.onSelectedRelease = function (selectedItem) { 
    $state.go('techStatusHistory', {'siteId': $scope.selectedSiteId, 'period': $scope.selectedPeriod, 'release': selectedItem}); 
}; 

Answer 1

einen ng-change-Tag zu Ihrem ui-select-Elemente hinzufügen, das eines gebunden ist Funktion, die die an die beiden anderen Ansichten gebundenen Modelle zurücksetzt:

<ui-select ... ng-change="resetFields()" ... > 

In Controller:

$scope.resetFields = function(){ 
    $scope.period = null; 
    $scope.release = null; 
}