AngularJS Textarea如果数据正在加载

我有一个textarea，它依赖于下拉菜单来填充。当更改下拉列表时，会拉出文件并将内容加载到textarea。AngularJS 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>

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

来源

2017-10-12 Sugitime

<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中使用这种显示消息的方法，而是创建另一个指令/组件来检测可重用的加载和保存请求完成，并将业务逻辑分开以保持控制器精简。

来源

2017-10-13 06:29:10

AngularJS Textarea如果数据正在加载

回答

相关问题