Angular.js

angular.js जटिल क्लाइंट साइड जावास्क्रिप्ट आधारित वेब अनुप्रयोगों के लिए मौजूदा HTML से डेटा निकालें, लेकिन मैं इसे छोटे सरल जावास्क्रिप्ट कार्यों के लिए उपयोग करने के बारे में भी सोच रहा हूं।Angular.js

<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) देखा है? उदाहरण के लिए आपने 'यूएल' तत्व के लिए एक विशेषता के माध्यम से एक निर्देश जोड़कर, आप जो चाहते थे वह कर सकते थे और बाल तत्वों को देख सकते थे, आदि – WiredPrairie

प्रश्न स्पष्ट नहीं है। कोणीय जेएस में आपने क्या प्रयास किया है? – SunnyShah

खोज इंजन के बारे में, क्या आपने यह देखा है? http://www.yearofmoo.com/2012/11/angularjs-and-seo.html –

ठीक है:

बेस्ट स्थिति यह करने के लिए कुछ इसी तरह होगा। स्पष्ट रूप से डिफ़ॉल्ट Angular.js अनुप्रयोग में इसका कोई तरीका नहीं है।

स्रोत

2013-04-13 17:24:23 TheHippo

मैं एक परियोजना मैं पर काम कर रहा हूँ में एक ही समस्या में पड़ गए। मेरा समाधान एचटीएमएल से डेटा को मेरे कोणीय नियंत्रक में एक चर में जोड़ने और फिर प्रारंभिक एचटीएमएल को छिपाना था। यह विधि जावास्क्रिप्ट के बिना एसईओ, पुराने ब्राउज़र और उपयोगकर्ताओं के लिए एचटीएमएल में मूल सूची रखती है। यह इस सूची को अन्य उपयोगकर्ताओं के लिए एक कोणीय जेनरेट के साथ बदल देता है।

आपके कोड का उपयोग कर एक कामकाजी उदाहरण नीचे चिपकाया गया है या आप इसे 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 तत्व के लिए कोणीय.लेमेंट()। स्कोप का उपयोग कर सकते हैं।

मैं इस प्रक्रिया का उपयोग कुछ बातचीत के लिए करता हूं जिसे कोणीय के साथ सीधे बॉक्स से बाहर नहीं किया जा सकता है।

स्रोत

2014-11-05 09:05:24

उत्तर

संबंधित मुद्दे