可使用来自 json 的模型数据进行角度排序

Question

我想在我的应用程序上使用 angular sortable。但是我的模型是从几个带有$http.get() 函数的json文件动态填充的。 ngSortable 从模型中看到的只是一个空数组。而且它不会从 JSON 文件中获取新数据。有什么解决方法吗？

$scope.jsons = ["data1.json", "data2.json"];
$scope.abc = [];

angular.forEach($scope.jsons, function(value, key){
	$http.get(value).success (function(data){
		$scope.abc.push(data);
	});
});

$scope.sortableOptions = {
  accept: function (sourceItemHandleScope, destSortableScope) {return true}
};

<div ng-model="abc" as-sortable="sortableOptions">
	<div ng-repeat="x in abc" as-sortable-item>
		<div as-sortable-item-handle>{{x.name}}</div>
	</div>
</div>

Answer 1

我在使用 ng-sortable 时遇到了同样的问题：对于静态数据，一切正常，但对于来自 $http.get() 的异步 JSON 数据则不行。

有两种解决方案：

1. 让控制器保持原样，在 html 部分，用“$parent.abc”替换两次出现的“abc”

2. 不要直接访问 'abc' 数组，而是使用中间对象，如下所示：

   $scope.tmpObject = {};
   $scope.tmpObject.abc=[];
   ...
   $http.get(value).success (function(data){
       $scope.tmpObject.abc.push(data);
   }); 
   

   ...

   <div ng-model="tmpObject.abc" as-sortable="sortableOptions">
       <div ng-repeat="x in tmpObject.abc" as-sortable-item>
           <div as-sortable-item-handle>{{x.name}}</div>
       </div>
   </div>
   

Answer 2

使用service $q 喜欢

//first make a factory using $q

yourappname.factory("factoryname",function($http, $q){
    var _getDetails=function(value){

        var deferred = $q.defer();
        $http.get(value).then(function(modal){

            deferred.resolve(modal);
        });

        return deferred.promise;

    };
  return  {
    _getDetails:_getDetails
  
};
  });

// then in your controller use this factory

$scope.jsons = ["data1.json", "data2.json"];
$scope.abc = [];


/**angular.forEach($scope.jsons, function(value, key){
	$http.get(value).success (function(data){
		$scope.abc.push(data);
	});
});
***/
angular.forEach($scope.jsons, function(value, key){
           var promiseData= factoryname._getDetails(value);
           promiseData.then(function(result){
           if(result.data)
            {
              $scope.abc.push(result.data);
              
            }
              
           });
});                  
$scope.sortableOptions = {
  accept: function (sourceItemHandleScope, destSortableScope) {return true}
};

<div ng-model="abc" as-sortable="sortableOptions">
	<div ng-repeat="x in abc" as-sortable-item>
		<div as-sortable-item-handle>{{x.name}}</div>
	</div>
</div>