2017-03-11 3 views
0

私のプロジェクトでは、タグ付けにngTagsInputを使用しています。私は問題がある、私はloadTagsでした。私はAPIから得て、{text : sometag}のような構造を変更しようとしました。そして、私のオートコンプリート・タグは機能しません。 http://mbenford.github.io/ngTagsInput/demosのチュートリアルのようにreturnを使用しています。 APIからデータを取得するためにAngular JSのAutoComple ngTagsInputの使用

LoadTags

$scope.loadTags = function(query) { 
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/"; 
    data = { 
     username: "newshubid", 
     data: { 
      orderby: { 
       field: "label", 
       type: "DESC" 
      } 
     } 
    }; 
    args = { 
     "data": JSON.stringify(data) 
    }; 
    param = $.param(args); 
    HttpService("POST", url, param, function(response) { 
     res = angular.fromJson(response.data); 
     angular.forEach(res, function(item) { 
      $scope.get_cat = { 
       text: item.label 
      }; 
      return $scope.get_cat; 
     }); 
    }); 
}; 

HTML

<tags-input ng-model="tag" class="bootstrap" 
             replace-spaces-with-dashes="false" 
             on-tag-added="AttachTag($tag)" 
             on-tag-removed="RemovedTag($tag)"> 
     <auto-complete source="loadTags($query)"></auto-complete> 
</tags-input> 

は私を助け、私が私の間違いを見つけるの溶液を得てください。ありがとうございました。

+0

サンプルjsonの作業コピーをplnkr/jsbin/jsfiddle ...に作成してもよろしいですか? –

答えて

0

あなたは、試してみてください配列として$scope.get_catを取り、その中に各タグをプッシュtag data

のバインディング間違っng-modelを使用しています。

$scope.loadTags = function(query) { 
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/"; 
    data = { 
     username: "newshubid", 
     data: { 
      orderby: { 
       field: "label", 
       type: "DESC" 
      } 
     } 
    }; 
    args = { 
     "data": JSON.stringify(data) 
    }; 
    param = $.param(args); 
    HttpService("POST", url, param, function(response) { 
     res = angular.fromJson(response.data); 
     $scope.get_cat = [] 
     angular.forEach(res, function(item) { 
      $scope.get_cat.push({ 
       text: item.label 
      }); 

     }); 
     return $scope.get_cat; 
    }); 
}; 
+0

あなたのコードを試しましたが、TypeErrorのようなconsole.logにエラーが表示されました:未定義の 'data'プロパティを読み取ることができません – userpr

+0

3行目に 'var data'を追加しようとしています – Sravan

+0

3行目のvarデータではないと思います。まだ動作していません – userpr

0

あなたがngTagsInputのドキュメントを正しく読んでいれば、それは期待通りに返されると書かれています。私はあなたのコードの中で少し変更を加えました。 $ qサービスは角度の約束を担当します。これであなたのコントローラーに$ qを注入する必要があります。それがうまくいくことを望みます。

$scope.loadTags = function(query) { 
     var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/"; 
     data = { 
      username: "newshubid", 
      data: { 
       orderby: { 
        field: "label", 
        type: "DESC" 
       } 
      } 
     }; 
     args = { 
      "data": JSON.stringify(data) 
     }; 
     param = $.param(args); 
     var deferred = $q.defer(); 
     HttpService("POST", url, param, 
     function(response) { 
      res = angular.fromJson(response.data); 
      $scope.get_cat = [] 
      angular.forEach(res, function(item) { 
       $scope.get_cat.push({ 
        text: item.label 
       }); 

      }); 
       deferred.resolve($scope.get_cat); 
       return deferred.promise; 
     }); 
    };