AngularJS Textarea如果數據正在加載

Question

我有一個textarea，它依賴於下拉菜單來填充。當更改下拉列表時，會拉出文件並將內容加載到textarea。

textarea加載時，它只是說[object Object]。我希望它比這更好。類似於「正在加載...」。

我無法找到專門做這與textarea雖然。

輪子上的另一個問題是，保存功能實際上依賴於文本區域的值來保存，所以我不能改變文本區域的內容來顯示'保存...'，否則內容是寫入文件只是'保存...'。

下面是代碼：

查看

<div id="Options" class="panel-collapse collapse"> 
    <div class="panel-body"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-addon input-sm">Config Select</span> 
       <select ng-change="update()" ng-model="configFileName" class="form-control input-sm"> 
        <option>--</option> 
        <option ng-repeat="conf in configList" value="{{conf.name}}">{{conf.name}}</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="input-group"> 
       <td style="padding-bottom: .5em;" class="text-muted">Config File</td><br /> 
       <textarea id="textareaEdit" rows="20" cols="46" ng-model="configFileContent"></textarea> 
       <input type="button" ng-click="updateConfig()" style="width: 90px;" value="Save"></button> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$scope.update = (function(param) { 
    $scope.configFileContent = 'Loading...'; 
    $scope.configFileContent = $api.request({ 
     module: 'Radius', 
     action: 'getConfigFileContent', 
     method: 'POST', 
     data: $scope.configFileName 
    }, function(response) { 
     $timeout(function() { 
      console.log('got it'); 
      $scope.configFileContent = response.confFileContent; 
     }, 2000); 
    }); 
}); 

$scope.updateConfig = (function(param) { 
    var data = [$scope.configFileName, $scope.configFileContent]; 
    var json = JSON.stringify(data); 
    $scope.configFileContent = $api.request({ 
     module: 'Radius', 
     action: 'saveConfigFileContent', 
     method: 'POST', 
     data: json 
    }, function(response) { 
     $timeout(function() { 
      console.log('Saved!'); 
      $scope.update(); 

     }, 2000); 
    }); 
}); 

Answer 1

<script> 
    var app = angular.module("myShoppingList", []); 
    app.controller("myCtrl", function($scope, $timeout) { 
     $scope.update = function() { 
     if ($scope.selectedData === '') { 
      $scope.someData = ''; 
      return; 
     } 
     // do http response 
     var data = 'dummy file text from server'; 

     $scope.xhr = false; 

     $scope.msg = 'loading...'; 

     // simulating fetch request 
     $timeout(function() { 
      $scope.xhr = true; 
      $scope.content = data; 
     }, 3000); 
     } 
    }); 

    </script> 

    <div ng-app="myShoppingList" ng-controller="myCtrl"> 

    <select ng-model="selectedData" ng-change="update()"> 
     <option selected="selected" value="">Select data</option> 
     <option value="foo">Fetch my data</option> 
    </select> 
     <br><br><br> 
    <textarea rows="5" cols="20" ng-model="someData" ng-value="xhr === false ? msg : content"> 
    </textarea> 
    </div> 

您可以使用範圍變量來檢測的承諾要求完成xhr和simulat加載...消息。

至於保存，我建議不要在textarea中使用這種顯示消息的方法，而是創建另一個指令/組件來檢測可重用的加載和保存請求完成，並將業務邏輯分開以保持控制器精簡。