如何延遲ng-init函數，直到我的api調用成功

Question

我正在使用ng-repeat進行動態表單。 我正在使用oi-select加載我的位置。 我正在模式彈出窗口中加載此表單。 關於獲取我的位置值，我要在點擊模式打開按鈕時調用一個api函數。 在此api調用成功后，我正在調用ng-init方法。 根據我的要求，我應該在模式打開按鈕的單擊上進行此api調用。 如果我是第一次單擊該按鈕，則默認情況下，我的第一個位置值不會加載到選擇框中。 因為我的ng-init函數是在api調用之前調用的。 除了第一次工作正常。 僅在第一次未加載時，默認情況下location [0]值。 我的問題是如何延遲此ng-init函數？ 還有其他方法可以解決此問題。 我在這里附上了我的矮人鏈接。請幫助我解決這個問題。 https://plnkr.co/edit/xDVetaZIzpFdKLS9ihU6?p=preview

HTML代碼

<body class="container row">
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <a class="btn btn-primary" data-toggle="modal" href='#modal-id' ng-click="getLocation()">Trigger modal</a>
        <div class="modal fade" id="modal-id">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form" name='userForm' novalidate>
                            <div class="container">
                                <div class="row" ng-repeat="user in users">
                                    <div class="form-group">
                                        <div class="col-md-3">
                                            <label>ID</label>
                                            <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                                        </div>
                                        <div class="col-md-3">
                                            <label>Comments</label>
                                            <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                                        </div>

                                        <div class="col-md-3 ">
                                            <label>Location</label>

                                            <oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user, locations)' name="select2" required>

                                            </oi-select>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="buttonContainer text-center btn-container">
                                <br>
                                <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
                                <button type="button" class="btn button--default btn--small pull-center">Close</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
        <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </div>
</div>

js代碼

var app = angular.module('myApp', ['ngResource', 'oi.select']);

app.factory('commonService', function($http, $q) {
return {
    preFCSManualReleases: function() {
        var deferred = $q.defer();
        var url = "data.json";
        $http.get(url, {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: ''
        }).then(function(data) {
            deferred.resolve(data.data);
        });

        return deferred.promise;
    }
}
});
app.controller('myCtrl', function($scope, commonService) {
 $scope.getLocation = function() {
    $scope.ids = [1, 2];
    commonService.preFCSManualReleases().then(function(data) {

        $scope.locations = data;
        console.log('$scope.location[0]==============>', $scope.locations[0])
        $scope.initLocation = (user, locations) => {
            if (!user.location.length) {
                user.location.push(locations[0]);
            }
        }
    });

    $scope.users = $scope.ids.map(function(id) {
        return {
            id: id,
            comment: "",
            location: []
        };
    });
}
$scope.adduser = function() {
    var data = $scope.users.map(function(user) {

        return {
            "userid": user.id,
            "manualcomment": user.comment,
            "location": user.location
        }
    });

    console.log("data", data)

 }

  });

Answer 1

您可以在oi-select父項上設置條件：

<div class="col-md-3" ng-if="locationsLoaded">
    <label>Location</label>

    <oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user, locations)' name="select2" required>

    </oi-select>
</div>

然后，您可以控制$ scope.locationsLoaded在控制器中：

$scope.getLocation = function() {
  $scope.locationsLoaded = false;
  commonService.preFCSManualReleases().then(function(data) {

      $scope.locations = data;
      console.log('$scope.location[0]==============>', $scope.locations[0])
      $scope.initLocation = (user, locations) => {
          if (!user.location.length) {
              user.location.push(locations[0]);
          }
      }

      $scope.locationsLoaded = true; // we now have the required data
  });
}

一旦locationsLoaded為true，並且當觸發ng-init時，ng-if將編譯該元素，您可以確定是否有數據。

如何延遲ng-init函數，直到我的api調用成功

問題描述

1 個解決方案

解決方案1
0 2017-09-18 14:33:19

如何延遲ng-init函數，直到我的api調用成功

問題描述

1 個解決方案

解決方案1 0 2017-09-18 14:33:19

解決方案1
0 2017-09-18 14:33:19