Angular.jsで既存のHTMLからデータを抽出する

angular.jsは、複雑なクライアント側のJavaScriptベースのWebアプリケーションには最適ですが、私はこれをより小さな単純なJavaScriptタスクに使用することも考えています。例えばAngular.jsで既存のHTMLからデータを抽出する

私はいくつかの項目のリストを持っている：

<ul> 
    <li data-id="1">Foo</li> 
    <li data-id="2">Bar</li> 
</ul>

は今、私は簡単であるべき、いくつかのユーザー入力後フィルタリング、および/または、リストを並べ替える必要があるHTMLにいくつかのボタンを追加したいです仕事。

既存のHTML要素からデータを抽出してangular.jsで使用する方法はありますか？データはHTMLにする必要があり、そのエンジンはまた、明確にするためにいただきました！

編集のホールドを得ることができます検索：

最終結果はulリストからのデータが中に押し込まれることになりますリストを処理するコントローラのモデル。（[{id:1, text:"Foo"}, {id:2, text:"Bar"}]）
モデルにもっと多くのオブジェクトをプッシュすると、リストにモデルが表示されます。
モデルにフィルタを適用すると、li要素をフィルタリングする必要があります。

<div ng-model="data"> 
    <ul ng-repeat="object in data | filter:filterCriteria"> 
     <li data-id="1">Foo</li> 
     <li data-id="2">Bar</li> 
     <li data-id="{{object.id}}">{{object.text}}</li> 
    </ul> 
</div>

出典

2013-01-23 TheHippo

[指令]（http://docs.angularjs.org/guide/directive）を見ましたか？たとえばULの要素に属性を使って作成したディレクティブを追加することで、あなたが望むことを行い、子要素などを見ることができます。 – WiredPrairie

質問が明確ではありません。あなたはangularJSで何を試しましたか？ – SunnyShah

検索エンジンに関しては、これを見たことがありますか？ http://www.yearofmoo.com/2012/11/angularjs-and-seo.html –

オーケー：

ベストケースのシナリオは、次のようなものになるだろう。どうやら、デフォルトのAngular.jsアプリケーションでは、この方法はありません。

出典

2013-04-13 17:24:23 TheHippo

私が取り組んでいるプロジェクトで同じ問題が発生しました。私の解決策は、HTMLからのデータを角度コントローラーの変数に追加し、最初のhtmlを非表示にすることでした。このメソッドは、SEO、古いブラウザ、およびjavascriptのないユーザー用のhtmlに元のリストを保持します。このリストは、他のユーザーのために作成された角度に置き換えられます。

あなたのコードを使用した実例は以下に貼り付けられています。それはthis linkです。

私はこれが古い質問であることを認識していますので、私の答えは最初のポスターには役に立たないかもしれません。私の解決策は、私たちが行ったのと同じ問題にぶつかる他の誰かを対象にしています。

<!doctype html> 
<html xmlns:ng="http://angularjs.org" id="ng-app"> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
    <script> 
     function Ctrl($scope) { 
     $scope.objects = []; 
     $scope.init = function(){ 
      $("ul.data").hide(); 
      $("ul.data li").each(function(){ 
      var $this = $(this); 
      var newObject = { 
       name: $this.html(), 
       id: $this.attr("data-id") 
      }; 
      $scope.objects.push(newObject); 
      }); 
     }; 
     } 
    </script> 
    </head> 
    <body> 
    <div ng-app> 
     <div ng-controller="Ctrl" ng-init="init()"> 
     <ul> 
     <li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li> 
     </ul> 
     <ul class="data"> 
      <li data-id="1">Foo</li> 
      <li data-id="2">Bar</li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

出典

2014-01-27 15:48:08

これは私が持っているのと同じ問題に対する最良の応答であるため、+1しています。私は、jQueryを含まずに角をつけてこれを行うことができればと思います。 – marek

問題を正しく理解している場合は、該当するhtml要素のangular.element（）スコープを使用してください。

私はこの方法を角度の付いた箱から直接処理できない特定のやりとりに使用します。

出典

2014-11-05 09:05:24

Angular.jsで既存のHTMLからデータを抽出する

答えて

関連する問題