Angular.js

angular.js ile varolan HTML verileri ayıklamak, karmaşık istemci tarafı JavaScript tabanlı web uygulamaları için harika, ancak ben de daha küçük basit JavaScript görevleri için kullanmayı düşünüyorum.Angular.js

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

Şimdi filtrelemek ve/veya kolay olması gereken bazı kullanıcı girişi sonrasında listesini sıralamak hangi HTML bazı düğmeler eklemek istiyorum:

Örneğin bazı öğeleri ile bir liste var görev.

Varolan HTML öğelerinden verileri angular.js ile kullanmak için ayıklamanın bir yolu var mı? veri HTML olabilir, bu yüzden motor aynı zamanda bir tutun alabilir aramanıza gerek neyin netlik için

Düzenleme:

ul listeden veriler içine itilmiş olacağını

nihai sonuç olacağını Listeyi kontrol eden kontrolörün modeli. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
Modele daha fazla nesne bastığımda, liste bunları görüntülemelidir.
Modele bir filtre uygularsam, li öğelerini filtrelemelidir.

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

kaynak

2013-01-23 TheHippo

[Yönergeler] 'e bakabilirsiniz (http://docs.angularjs.org/guide/directive)? Örneğin 'UL' öğesine bir özellik aracılığıyla oluşturduğunuz bir yönergeyi ekleyerek, istediğiniz şeyi yapabilir ve alt öğelere bakabilirsin. – WiredPrairie

Soru açık değil. AngularJS'de ne denediniz? – SunnyShah

Arama motoruyla ilgili olarak, bunu gördünüz mü? http://www.yearofmoo.com/2012/11/angularjs-and-seo.html –

Okay:

En iyi senaryo buna benzer bir şey olurdu. Görünüşe göre, varsayılan bir Angular.js uygulamasında bunun bir yolu yoktur.

kaynak

2013-04-13 17:24:23 TheHippo

Üzerinde çalıştığım bir projede aynı sorunla karşılaştım. Benim çözümüm, html'den verileri açısal denetleyicimdeki bir değişkene eklemek ve ardından ilk html'yi gizlemekti. Bu yöntem javascript olmadan SEO, eski tarayıcılar ve kullanıcılar için html orijinal listesini tutar. Bu listeyi diğer kullanıcılar için açısal olarak oluşturulmuş bir yerle değiştirir.

Kodunuzu kullanarak çalışan bir örnek aşağıya yapıştırılmış veya this link adresinde görebilirsiniz.

Bunun eski bir soru olduğunun farkındayım, bu yüzden cevabım ilk afiş için yardımcı olmayabilir. Benim çözümüm, yaptığımız aynı probleme giren herkesi hedef alıyor. Ben doğru soruyu anlama am mı

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

kaynak

2014-01-27 15:48:08

Bu, sahip olduğum aynı soruna en iyi yanıt olduğu için +1 veriyorum. Merak ediyorum, eğer jQuery içermeden, bu sadece açısal ile yapılabilirse. – marek

, sadece söz konusu html elemanı için angular.element(). Kapsam kullanabilirsiniz.

Bu yöntemi, doğrudan kutudan açısal olarak işlenemeyen belirli etkileşim için kullanıyorum.

kaynak

2014-11-05 09:05:24

cevap

İlgili konular