Extrahieren Sie Daten aus vorhandenem HTML mit Angular.js

angular.js ist ideal für komplexe clientseitige JavaScript-basierte Webanwendungen, aber ich denke auch daran, es für kleinere einfache JavaScript-Aufgaben zu verwenden.Extrahieren Sie Daten aus vorhandenem HTML mit Angular.js

Zum Beispiel habe ich eine Liste mit einigen Einzelteilen:

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

Jetzt möchte ich ein paar Knöpfe an den HTML hinzuzufügen, die filtern soll und/oder die Liste nach einiger Benutzereingabe sortieren, die ein einfach sein sollte Aufgabe.

Gibt es eine Möglichkeit, die Daten aus vorhandenen HTML-Elementen zu extrahieren, um sie mit angular.js zu verwenden? Die Daten müssen in der HTML sein, also Suchmaschinen auch halten was

bearbeiten für Klarheit bekommen konnte:

Das Ergebnis wäre, dass die Daten aus der ul Liste wird in eine geschoben werden Modell des Controllers, der die Liste behandelt. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
Wenn ich mehr Objekte in das Modell verschiebe, sollte die Liste sie anzeigen. Wenn ich einen Filter auf das Modell anwende, sollte es die li Elemente filtern.

Im besten Fall etwas ähnliches sein würde:

<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>

Quelle

2013-01-23 TheHippo

Haben Sie sich [Richtlinien] (http://docs.angularjs.org/guide/directive) angesehen? Wenn Sie eine Anweisung hinzufügen, die Sie beispielsweise über ein Attribut zum UL-Element erstellt haben, können Sie das tun, was Sie wollten, und sich die untergeordneten Elemente ansehen. – WiredPrairie

Die Frage ist nicht klar. Was hast du in angularJS ausprobiert? – SunnyShah

In Bezug auf Suchmaschine, hast du das gesehen? http://www.yearofmoo.com/2012/11/angularjs-and-seo.html –

Okay. Anscheinend gibt es in einer standardmäßigen Angular.js-Anwendung keinen Weg dazu.

Quelle

2013-04-13 17:24:23 TheHippo

Ich stieß auf das gleiche Problem in einem Projekt, an dem ich arbeite. Meine Lösung bestand darin, die Daten aus dem HTML zu einer Variablen in meinem Winkelregler hinzuzufügen und dann den ursprünglichen HTML-Code auszublenden. Diese Methode behält die ursprüngliche Liste im HTML für SEO, alte Browser und Benutzer ohne Javascript bei. Es ersetzt diese Liste durch eine eckig erzeugte für andere Benutzer.

Ein funktionierendes Beispiel mit Ihrem Code ist unten eingefügt oder Sie können es unter this link sehen.

Ich bin mir bewusst, dass dies eine alte Frage ist, so dass meine Antwort dem ersten Poster nicht helfen kann. Meine Lösung richtet sich an alle anderen, die auf dasselbe Problem stoßen wie wir.

<!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>

Quelle

2014-01-27 15:48:08

Ich gebe es ein +1, da dies die beste Antwort auf das gleiche Problem ist, das ich habe. Ich frage mich allerdings, ob dies mit eckigen selbst erledigt werden könnte, ohne jQuery einzubeziehen. – marek

Wenn ich die Frage richtig verstehe, können Sie einfach angle.element(). Scope für das betreffende HTML-Element verwenden.

Ich benutze diese Methode für bestimmte Interaktion, die nicht direkt aus der Box mit eckigen gehandhabt werden kann.

Quelle

2014-11-05 09:05:24

Extrahieren Sie Daten aus vorhandenem HTML mit Angular.js

Antwort

Verwandte Themen