Question

我有一个依赖于下拉菜单填充的textarea。更改下拉列表时，将拉出一个文件并将内容加载到textarea。

当textarea正在加载时，它只是说[object Object]。我希望它比那更好一些。像“正在加载......”之类的东西。

我无法通过textarea专门做到这一点。

方向盘中的另一个问题是Save功能实际上依赖于要保存的文本区域的值，所以我不能只改变文本区域的内容来显示'Saving ...'，否则写入的内容该文件只是'保存...'。

以下是代码：

查看

<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的promise请求的完成情况并模拟loading ...消息。

至于保存，我建议不要在textarea中使用这种显示消息的方法，而是创建另一个指令/组件来检测可重用的加载和保存请求完成，并将保持控制器的业务逻辑分离。

AngularJS Textarea如果正在加载数据

1 个答案: