Question

我正在使用 ng-repeat 处理动态表单。我正在使用 oi-select 来加载我的位置。我在模态弹出窗口中加载此表单。关于获取我的位置值我点击我的模态打开按钮调用一个api函数。在这个api调用成功后，我调用了 ng-init 方法。根据我的要求，我应该点击模态打开按钮进行此api调用。如果我是第一次点击该按钮，默认情况下我的第一个位置值不会加载到选择框内。因为我的api调用之前调用了 ng-init 函数。除了第一次工作正常。只有第一次没有默认加载该位置[0]值。我的问题是如何延迟 ng-init 功能？有没有其他方法可以解决此问题。在这里，我附上了我的plunker链接。请帮我解决这个问题。 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 code

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为真，ng-if将编译元素，当触发ng-init时，你确定有数据。

如何延迟我的ng-init功能，直到我的api调用成功

1 个答案: