AngularJS
अंतर्निहित निर्देश

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap

कोणीय भाव - पाठ बनाम संख्या

यह उदाहरण दर्शाता है कि इनपुट तत्व के लिए type="text" और type="number" का उपयोग करते समय कोणीय अभिव्यक्ति का मूल्यांकन कैसे किया जाता है। निम्नलिखित नियंत्रक पर विचार करें और देखें:

नियंत्रक

 var app = angular.module('app', []);

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

राय

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

का उपयोग करते समय + एक अभिव्यक्ति पाठ इनपुट के लिए बाध्य में, ऑपरेटर तार (पहला उदाहरण) जोड़, स्क्रीन पर प्रदर्शित 55 होगा * ।
का उपयोग करते समय + एक अभिव्यक्ति संख्या इनपुट करने के लिए बाध्य है, ऑपरेटर संख्याओं का योग (दूसरा उदाहरण) लौटने के लिए, स्क्रीन पर 10 प्रदर्शित * ।

* - वह तब तक है जब तक उपयोगकर्ता इनपुट क्षेत्र में मूल्य नहीं बदलता है, बाद में प्रदर्शन तदनुसार बदल जाएगा।

काम करने का उदाहरण

ngRepeat

ng-repeat एक ऐसा निर्देशन है जो कोणीय में बनाया गया है, जो आपको एक सरणी या ऑब्जेक्ट को पुनरावृत्त करने देता है और आपको संग्रह में प्रत्येक आइटम के लिए एक बार एक तत्व दोहराने की क्षमता देता है।

एनजी-रिपीट एरे

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

कहाँ पे:
आइटम = संग्रह में व्यक्तिगत आइटम
itemCollection = वह सरणी जिसे आप पुनरावृत्त कर रहे हैं

एक वस्तु दोहराना

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

कहाँ पे:
की = संपत्ति का नाम
मूल्य = संपत्ति का मूल्य
myObject = आप जिस वस्तु को पुनरावृत्त कर रहे हैं

उपयोगकर्ता इनपुट द्वारा अपना एनजी-रिपीट फ़िल्टर करें

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

कहाँ पे:
searchText = वह टेक्स्ट जिसे उपयोगकर्ता द्वारा सूची फ़िल्टर करना चाहता है
stringArray = स्ट्रिंग्स की एक सरणी, उदाहरण के लिए ['string', 'array']

आप फ़िल्टर किए गए आइटमों को फ़िल्टर आउटपुट को अन्य नाम के साथ उपनाम के as aliasName प्रदर्शित करके भी प्रदर्शित या संदर्भ दे सकते हैं, जैसे:

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

एनजी-रिपीट-स्टार्ट और एनजी-रिपीट-एंड

एक शुरुआत और एक अंतिम बिंदु को परिभाषित करके कई DOM तत्वों को दोहराने के लिए आप ng-repeat-start और ng-repeat-end निर्देश का उपयोग कर सकते हैं।

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

आउटपुट:

ng-repeat-end साथ हमेशा ng-repeat-start को बंद करना महत्वपूर्ण है।

चर

ng-repeat भी अभिव्यक्ति के अंदर इन चरों को उजागर करता है

परिवर्तनशील	प्रकार	विवरण
`$index`	संख्या	वर्तमान पुनरावृत्ति के सूचकांक के बराबर है ($ इंडेक्स === 0 पहले पुनरावृत्त तत्वों पर सच का मूल्यांकन करेगा, पहले `$first` देखें)
`$first`	बूलियन	पहले पुनरावृत्त तत्व पर सत्य का मूल्यांकन करता है
`$last`	बूलियन	अंतिम पुनरावृत्त तत्व पर सत्य का मूल्यांकन करता है
`$middle`	बूलियन	यदि तत्व `$first` और `$last` बीच है, तो सत्य का मूल्यांकन करता है
`$even`	बूलियन	एक समान संख्या में पुनरावृत्ति के लिए सही का मूल्यांकन ( `$index%2===0` बराबर)
`$odd`	बूलियन	एक विषम संख्या वाले पुनरावृत्ति पर सत्य का मूल्यांकन करता है ( `$index%2===1` बराबर)

प्रदर्शन के विचार

विशेष रूप से बड़े संग्रहों का उपयोग करते समय, ngRepeat धीमी हो सकती है।

यदि संग्रह में ऑब्जेक्ट्स के पास एक पहचानकर्ता गुण है, तो आपको हमेशा पूरे ऑब्जेक्ट के बजाय पहचानकर्ता track by करना चाहिए, जो कि डिफ़ॉल्ट कार्यक्षमता है। यदि कोई पहचानकर्ता मौजूद नहीं है, तो आप हमेशा अंतर्निहित $index उपयोग कर सकते हैं।

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

घेरा का घेरा

ngRepeat हमेशा एक अलग चाइल्ड स्कोप ngRepeat इसलिए अगर पैरेंट स्कोप को रिपीट के अंदर एक्सेस करने की आवश्यकता हो तो देखभाल की जानी चाहिए।

यहाँ एक सरल उदाहरण दिखाया गया है कि कैसे आप ngRepeat अंदर एक क्लिक इवेंट से अपने पैरेंट स्कोप में वैल्यू सेट कर सकते हैं।

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

अगर ng-click पर केवल val = item.value था। ng-click यह अलग-अलग स्कोप की वजह से val को पैरेंट स्कोप में अपडेट नहीं करेगा। इसीलिए पेरेंट स्कोप को $parent रेफरेंस या controllerAs सिंटैक्स (जैसे ng-controller="mainController as ctrl" ) के साथ एक्सेस किया जाता है।

घोंसला एनजी-रिपीट

आप नेस्टेड एनजी-रिपीट का भी उपयोग कर सकते हैं।

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

चाइल्ड एनजी-रिपीट के अंदर पैरेंट एनजी-रिपीट के इंडेक्स को एक्सेस करने के लिए, आप $parent.$index उपयोग कर सकते हैं $parent.$index ।

ngShow और ngHide

ng-show निर्देश एचटीएमएल तत्व को दिखाता है या छुपाता है, अगर इसके आधार पर अभिव्यक्ति सही है या गलत है। यदि अभिव्यक्ति का मूल्य गलत है, तो यह छिप जाएगा। अगर यह सच है तो यह दिखाएगा।

ng-hide निर्देश समान है। हालाँकि, यदि मान गलत है, तो यह HTML तत्व दिखाएगा। जब अभिव्यक्ति सत्य है तो वह इसे छिपाएगा।

कार्य JSBin उदाहरण

नियंत्रक :

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken username
  vm.taken_username = 'StackOverflow';
  
}

राय

<section ng-controller="ExampleController as main">
    
    <p>Enter Password</p>
    <input ng-model="main.username" type="text">
    
    <hr>
    
    <!-- Will always show as long as StackOverflow is not typed in -->
    <!-- The expression is always true when it is not StackOverflow -->
    <div style="color:green;" ng-show="main.username != main.taken_username">
      Your username is free to use!
    </div>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- The expression value becomes falsy -->
    <div style="color:red;" ng-hide="main.username != main.taken_username">
      Your username is taken!
    </div>
    
    <p>Enter 'StackOverflow' in username field to show ngHide directive.</p>
    
 </section>

ngOptions

ngOptions एक निर्देश है जो किसी आइटम से किसी मॉडल में संग्रहित किए जाने वाले आइटम के चयन के लिए html ड्रॉपडाउन बॉक्स के निर्माण को सरल ngOptions है। एनजीओ की विशेषता का उपयोग गतिशील रूप से <option> तत्वों की एक सूची उत्पन्न करने के लिए किया जाता है <select> तत्व के लिए एरे या ऑब्जेक्ट का उपयोग करके एनकोओस कॉम्प्रिहेंशन अभिव्यक्ति का मूल्यांकन करके।

ng-options के साथ मार्कअप को केवल एक चुनिंदा टैग में घटाया जा सकता है और निर्देश उसी चयन को बनाएगा:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

बनाने के परागकोष तरीका नहीं है select विकल्पों का उपयोग कर ng-repeat , लेकिन इसका इस्तेमाल करने की सलाह नहीं दी जाती ng-repeat के रूप में यह ज्यादातर की तरह, सामान्य प्रयोजन के लिए प्रयोग किया जाता है forEach बस पाश करने के लिए। जबकि ng-options विशेष रूप से select टैग विकल्प बनाने के लिए है।

ng-repeat का उपयोग करने वाला उपरोक्त उदाहरण होगा

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

पूर्ण प्रदर्शनी

ऊपर दिए गए उदाहरण को विस्तार से देखें, इसमें कुछ बदलाव भी हैं।

उदाहरण के लिए डेटा मॉडल:

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

 <option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

प्रभाव:

f.label <option> का लेबल होगा और मान में संपूर्ण ऑब्जेक्ट होगा।

पूर्ण प्रदर्शनी

<!-- select as label for value in array -->
<select ng-options="f.value as f.label for f in fruit" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

 <option value="4"> Apples </option>

प्रभाव:

f.value (4) इस मामले में मूल्य होगा जबकि लेबल अभी भी समान है।

पूर्ण प्रदर्शनी

<!-- label group by group for value in array -->
<select ng-options="f.label group by f.value for f in fruit" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

प्रभाव:

विकल्प वहाँ value आधार पर समूहीकृत किए जाएंगे। समान value विकल्प एक श्रेणी के अंतर्गत आएंगे

पूर्ण प्रदर्शनी

<!-- label disable when disable for value in array -->
<select ng-options="f.label disable when f.value == 4 for f in fruit" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

प्रभाव:

disable when f.value==4 स्थिति disable when f.value==4 कारण "सेब" और "नीबू" अक्षम हो जाएंगे (चयन करने में असमर्थ)। value=4 सभी विकल्प अक्षम हो जाएंगे

पूर्ण प्रदर्शनी

<!-- label group by group for value in array track by trackexpr -->
<select ng-options="f.value as f.label group by f.value for f in fruit track by f.id" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

<option value="4"> Apples </option>

प्रभाव:

trackBy का उपयोग करते समय दृश्य परिवर्तन नहीं trackBy , लेकिन कोणीय संदर्भ के बजाय id द्वारा परिवर्तनों का पता लगाएगा जो कि हमेशा सबसे बेहतर समाधान होता है।

पूर्ण प्रदर्शनी

<!-- label for value in array | orderBy:orderexpr track by trackexpr -->
<select ng-options="f.label for f in fruit | orderBy:'id' track by f.id" ng-model="selectedFruit"></select>

चयन पर उत्पन्न विकल्प टैग:

<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>

प्रभाव:

orderBy एक AngularJS मानक फ़िल्टर है जो आरोही क्रम में विकल्पों को व्यवस्थित करता है (डिफ़ॉल्ट रूप से) इसलिए इसमें "संतरे" 1 id = 1 के बाद से दिखाई देंगे।

पूर्ण प्रदर्शनी

ng-options साथ सभी <select> ng-model संलग्न होना चाहिए।

ngModel

एनजी-मॉडल के साथ आप एक चर को किसी भी प्रकार के इनपुट क्षेत्र से बांध सकते हैं। आप डबल घुंघराले ब्रेसिज़ का उपयोग करके चर प्रदर्शित कर सकते हैं, जैसे {{myAge}} ।

<input type="text" ng-model="myName">
<p>{{myName}}</p>

जैसा कि आप इनपुट क्षेत्र में टाइप करते हैं या इसे किसी भी तरह से बदलते हैं, आपको पैराग्राफ अपडेट में मूल्य तुरंत दिखाई देगा।

इस उदाहरण में एनजी-मॉडल चर, आपके नियंत्रक में $scope.myName . $scope.myName रूप में उपलब्ध होगा। यदि आप controllerAs सिंटैक्स का उपयोग कर रहे हैं:

<div ng-controller="myCtrl as mc">
    <input type="text" ng-model="mc.myName">
    <p>{{mc.myName}}</p>
</div>

आपको एनजी-कंट्रोलर विशेषता को एनजी-मॉडल चर में परिभाषित नियंत्रक के उपनाम पूर्व-लंबित करके नियंत्रक के दायरे को संदर्भित करने की आवश्यकता होगी। इस तरह से आपको अपने एनजी-मॉडल चर को संदर्भित करने के लिए अपने नियंत्रक में $scope को इंजेक्ट करने की आवश्यकता नहीं होगी, चर आपके नियंत्रक के फ़ंक्शन के अंदर इस this.myName रूप में उपलब्ध होगा।

ngClass

मान लेते हैं कि आपको उपयोगकर्ता की स्थिति दिखाने की आवश्यकता है और आपके पास कई संभावित सीएसएस कक्षाएं हैं जिनका उपयोग किया जा सकता है। कोणीय कई संभव वर्गों की एक सूची से चुनना बहुत आसान बनाता है जो आपको ऑब्जेक्ट सूची को निर्दिष्ट करने की अनुमति देता है जिसमें सशर्त शामिल होते हैं। कोणीय स्थिति की सत्यता के आधार पर सही वर्ग का उपयोग करने में सक्षम है।

आपकी ऑब्जेक्ट में कुंजी / मान जोड़े होने चाहिए। कुंजी एक वर्ग नाम है जिसे तब लागू किया जाएगा जब मूल्य (सशर्त) सही का मूल्यांकन करता है।

<style>
    .active { background-color: green; color: white; }
    .inactive { background-color: gray; color: white; }
    .adminUser { font-weight: bold; color: yellow; }
    .regularUser { color: white; }
</style>

<span ng-class="{ 
    active: user.active, 
    inactive: !user.active, 
    adminUser: user.level === 1, 
    regularUser: user.level === 2 
}">John Smith</span>

कोणीय active स्थिति और level संख्या देखने के लिए $scope.user ऑब्जेक्ट की जाँच करेगा। उन चर में मूल्यों के आधार पर, कोणीय <span> मेल खाने वाली शैली को लागू करेगा।

ngIf

ng-if ng-show समान एक निर्देश है, लेकिन इसे बस छिपाने के बजाय डोम से तत्व को सम्मिलित या हटा देता है। कोणीय 1.1.5 ने एनजी-इफ निर्देशन पेश किया। आप 1.1.5 संस्करणों के ऊपर एनजी-अगर निर्देश का उपयोग कर सकते हैं। यह उपयोगी है क्योंकि कोणीय हटाए गए ng-if अंदर तत्वों के लिए पचाने की प्रक्रिया नहीं करेगा ng-if विशेष रूप से जटिल डेटा शिथिलता के लिए कोणीय के कार्यभार को कम करता है।

ng-show विपरीत, ng-if निर्देश एक बच्चे की गुंजाइश बनाता है जो प्रोटोटाइप विरासत का उपयोग करता है। इसका मतलब यह है कि बच्चे के दायरे पर एक आदिम मूल्य निर्धारित करना माता-पिता पर लागू नहीं होगा। पैरेंट स्कोप पर प्रिमिटिव सेट करने के लिए चाइल्ड स्कोप पर $parent प्रॉपर्टी का इस्तेमाल करना होगा।

जावास्क्रिप्ट

angular.module('MyApp', []);

angular.module('MyApp').controller('myController', ['$scope', '$window', function myController($scope, $window) {
    $scope.currentUser= $window.localStorage.getItem('userName');
}]);

राय

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

DOM यदि `currentUser` नहीं है, तो `currentUser` नहीं है

<div ng-controller="myController">
    <div ng-if="currentUser">
        Hello, {{currentUser}}
    </div>
    <!-- ng-if: !currentUser -->
</div>

DOM यदि `currentUser` है

<div ng-controller="myController">
    <!-- ng-if: currentUser -->
    <div ng-if="!currentUser">
        <a href="/login">Log In</a>
        <a href="/register">Register</a>
    </div>
</div>

काम करने का उदाहरण

समारोह का वादा

NgIf निर्देश कार्य को भी स्वीकार करता है, जिसे तार्किक रूप से सही या गलत लौटने की आवश्यकता होती है।

<div ng-if="myFunction()">
    <span>Span text</span>
</div>

स्पैन टेक्स्ट केवल तभी दिखाई देगा जब फ़ंक्शन सही हो।

$scope.myFunction = function() {
    var result = false;
    // Code to determine the boolean value of result 
    return result;
};

किसी भी कोणीय अभिव्यक्ति के रूप में फ़ंक्शन किसी भी प्रकार के चर को स्वीकार करता है।

ngMouseenter और ngMouseleave

ng-mouseenter और ng-mouseleave निर्देश घटनाओं को चलाने और सीएसएस स्टाइल को लागू करने के लिए उपयोगी होते हैं जब आप अपने डोम तत्वों में या बाहर मंडराने लगते हैं।

ng-mouseenter निर्देश एक अभिव्यक्ति एक माउस प्रवेश घटना चलाता है (जब उपयोगकर्ता डोम तत्व पर अपने माउस पॉइंटर में प्रवेश करता है यह निर्देश रहता है)

एचटीएमएल

<div ng-mouseenter="applyStyle = true" ng-class="{'active': applyStyle}">

उपरोक्त उदाहरण में, जब उपयोगकर्ता अपने माउस को div applyStyle , तो applyStyle true जाता true , जो बदले में .active CSS क्लास को ng-class में लागू करता है।

ng-mouseleave निर्देश एक माउस से बाहर निकलने की घटना पर एक अभिव्यक्ति चलाता है (जब उपयोगकर्ता अपने माउस कर्सर को डोम तत्व से दूर ले जाता है यह निर्देश अंदर रहता है)

एचटीएमएल

<div ng-mouseenter="applyStyle = true" ng-mouseleaver="applyStyle = false" ng-class="{'active': applyStyle}">

पहले उदाहरण का पुन: उपयोग करते हुए, अब जब उपयोगकर्ता उसे माउस पॉइंटर को डिव से दूर ले जाता है, तो .active क्लास हटा दिया जाता है।

ngDisabled

यह निर्देश कुछ मौजूदा स्थितियों के आधार पर इनपुट घटनाओं को सीमित करने के लिए उपयोगी है।

ng-disabled निर्देश स्वीकार करता है और अभिव्यक्ति है कि या तो एक सत्य या गलत मूल्यों का मूल्यांकन करना चाहिए।

ng-disabled का उपयोग input तत्व पर सशर्त रूप से disabled विशेषता को लागू करने के disabled किया जाता है।

एचटीएमएल

<input type="text" ng-model="vm.name">

<button ng-disabled="vm.name.length===0" ng-click="vm.submitMe">Submit</button>

vm.name.length===0 का मूल्यांकन सत्य है यदि input की लंबाई 0 है, जो बटन को निष्क्रिय करता है, तो उपयोगकर्ता को ng-click घटना पर क्लिक करने के लिए vm.name.length===0 करता है

ngDblclick

जब आप अपने DOM तत्वों में एक डबल-क्लिक ईवेंट को बांधना चाहते हैं, तो ng-dblclick निर्देश उपयोगी होता है।

यह निर्देश एक अभिव्यक्ति को स्वीकार करता है

एचटीएमएल

<input type="number" ng-model="num = num + 1" ng-init="num=0">

<button ng-dblclick="num++">Double click me</button>

उपरोक्त उदाहरण में, input पर रखा गया मूल्य तब बढ़ाया जाएगा जब बटन डबल क्लिक किया जाएगा।

बिल्ट-इन डायरेक्शंस चीट शीट

ng-app एंगुलरजेएस सेक्शन को सेट करता है।

ng-init एक डिफ़ॉल्ट चर मान सेट करता है।

ng-bind वैकल्पिक {{}} टेम्पलेट के लिए।

ng-bind-template कई भावों को दृश्य में बांधता है।

ng-non-bindable स्टेट्स ng-non-bindable कि डेटा बाइंडेबल नहीं है।

ng-bind-html एक HTML तत्व की आंतरिक HTML संपत्ति को बांधता है।

जब उपयोगकर्ता इनपुट बदलता है तो ng-change निर्दिष्ट अभिव्यक्ति का मूल्यांकन करता है।

ng-checked सेट चेकबॉक्स।

ng-class सीएसएस क्लास को गतिशील रूप से सेट करता है।

जब तक AngularJS ने नियंत्रण नहीं लिया है, तब तक ng-cloak रोकता है।

ng-click निष्पादित करता है एक विधि या अभिव्यक्ति जब तत्व क्लिक किया जाता है।

ng-controller दृश्य को एक नियंत्रक वर्ग देता है।

ng-disabled नियंत्रण तत्व के अक्षम संपत्ति को नियंत्रित करता है

ng-form एक फॉर्म सेट करता है

ng-href डायनामिक रूप से AngularJS को href विशेषता से बाँधता है।

ng-include करने के लिए उपयोग किया जाता है, संकलन करें और अपने पृष्ठ पर एक बाहरी HTML टुकड़ा शामिल करें।

ng-if DOM में किसी तत्व को एक्सप्रेशन के आधार पर निकालें या फिर से बनाए

ng-switch मिलान अभिव्यक्ति के आधार पर सशर्त रूप से स्विच नियंत्रण।

ng-model मॉडल संपत्ति के साथ एक इनपुट, चयन, textarea आदि तत्वों को बांधता है।

ng-readonly किसी तत्व को आसानी से सेट करने के ng-readonly उपयोग किया जाता है।

ng-repeat एक नए टेम्पलेट को बनाने के लिए संग्रह में प्रत्येक आइटम के माध्यम से लूप का उपयोग किया जाता है।

ng-selected तत्व में चयनित विकल्प सेट करने के लिए उपयोग किया जाता है।

ng-show/ng-hide दिखाएँ / अभिव्यक्ति के आधार पर तत्वों को छिपाएं।

ng-src डायनामिक रूप से AngularJS चर को src विशेषता से बाँधता है।

ng-submit बाइंड कोणीय अभिव्यक्ति ओनसुबमिट घटनाओं के लिए।

ng-value बाइंड कोणीय भावों के मान को।

ng-required बाइंड कोणीय घटनाओं को ऑनसाइट करने के लिए।

एक HTML तत्व पर ng-style सेट सीएसएस शैली।

ng-pattern ngModel के पैटर्न सत्यापनकर्ता जोड़ता है।

ng-maxlength लिए maxlength सत्यापनकर्ता को जोड़ता है।

ng-minlength minlength, ngModel के लिए minlength सत्यापनकर्ता को जोड़ता है।

ng-classeven के साथ मिलकर काम करता है और केवल (सम) पंक्तियों पर प्रभाव डालता है।

ng-classodd के साथ मिलकर काम करता है और केवल विषम (सम) पंक्तियों पर प्रभाव डालता है।

ng-cut उपयोग कट ईवेंट पर कस्टम व्यवहार को निर्दिष्ट करने के लिए किया जाता है।

ng-copy उपयोग कॉपी इवेंट पर कस्टम व्यवहार को निर्दिष्ट करने के लिए किया जाता है।

ng-paste पेस्ट इवेंट पर कस्टम व्यवहार को निर्दिष्ट करने के लिए उपयोग किया जाता है।

ng-options तत्व के लिए तत्वों की एक सूची को गतिशील रूप से उत्पन्न करने के लिए उपयोग किया जाता है।

ng-list निर्दिष्ट स्ट्रिंग के आधार पर स्ट्रिंग को सूची में बदलने के ng-list प्रयुक्त।

ng-open उपयोग तत्व पर खुली विशेषता सेट करने के लिए किया जाता है, अगर एनजीओपेन के अंदर की अभिव्यक्ति सत्य है।

स्रोत (थोड़ा संपादित)

ngClick

ng-click निर्देश डोम तत्व को एक क्लिक ईवेंट देता है।

DOM के तत्व को ng-click निर्देश आपको कस्टम व्यवहार को निर्दिष्ट करने की अनुमति देता है।

यह उपयोगी है जब आप बटन पर क्लिक की घटनाओं को संलग्न करना चाहते हैं और उन्हें अपने नियंत्रक पर संभालते हैं।

यह निर्देश $event रूप में उपलब्ध घटनाओं ऑब्जेक्ट के साथ एक अभिव्यक्ति को स्वीकार करता है

एचटीएमएल

<input ng-click="onClick($event)">Click me</input>

नियंत्रक

.controller("ctrl", function($scope) {   
    $scope.onClick = function(evt) {
        console.debug("Hello click event: %o ",evt);
    } 
})

एचटीएमएल

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

एचटीएमएल

<button ng-click="count()" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

नियंत्रक

...

$scope.count = function(){
    $scope.count = $scope.count + 1;
}
...

जब बटन पर क्लिक किया जाता है, तो onClick फ़ंक्शन का एक आमंत्रण "हैलो क्लिक इवेंट" प्रिंट करेगा, जिसके बाद ईवेंट ऑब्जेक्ट होगा।

ngRequired

ng-required एक तत्व पर required सत्यापन विशेषता को जोड़ता या हटाता है, जो बदले में input लिए require सत्यापन कुंजी को सक्षम और अक्षम करेगा।

यदि input तत्व को गैर-रिक्त मान के लिए आवश्यक है, तो इसे वैकल्पिक रूप से परिभाषित करने के लिए उपयोग किया जाता है। निर्देश जटिल HTML रूपों पर सत्यापन को डिजाइन करते समय सहायक होता है।

एचटीएमएल

<input type="checkbox" ng-model="someBooleanValue">
<input type="text" ng-model="username" ng-required="someBooleanValue">

एनजी मॉडल-विकल्प

ng-model-options के डिफ़ॉल्ट व्यवहार को बदलने की अनुमति देता ng-model , इस निर्देश की घटनाओं है कि जब एनजी मॉडल अद्यतन किया जाता है को सक्रिय कर देगा और एक debounce प्रभाव संलग्न करने के लिए रजिस्टर करने के लिए अनुमति देता है।

यह निर्देश एक अभिव्यक्ति को स्वीकार करता है जो एक परिभाषा वस्तु या एक गुंजाइश मूल्य के संदर्भ में मूल्यांकन करेगा।

उदाहरण:

<input type="text" ng-model="myValue" ng-model-options="{'debounce': 500}">

उपरोक्त उदाहरण myValue पर 500 मिलीसेकेंड का एक myValue प्रभाव संलग्न करेगा, जो उपयोगकर्ता द्वारा input पर टाइप करने के बाद मॉडल को 500 ms अपडेट करने का कारण होगा (अर्थात, जब myValue ने अपडेट myValue समाप्त कर दिया है)।

उपलब्ध वस्तु गुण

updateOn : निर्दिष्ट करता है कि कौन सा ईवेंट इनपुट के लिए बाध्य होना चाहिए
```
ng-model-options="{ updateOn: 'blur'}" // will update on blur
```
debounce : मॉडल अद्यतन की दिशा में कुछ मिलीसेकेंड की देरी को निर्दिष्ट करता है
```
ng-model-options="{'debounce': 500}" // will update the model after 1/2 second
```
allowInvalid : मॉडल के लिए एक अमान्य मान के लिए एक बूलियन ध्वज, डिफ़ॉल्ट रूप सत्यापन को दरकिनार करते हुए, इन मूल्यों को undefined माना जाएगा।
getterSetter : एक बूलियन ध्वज जो यह दर्शाता है कि सादे मॉडल मूल्य के बजाय ng-model को getterSetter / सेटर फ़ंक्शन के रूप में माना जाता है। फ़ंक्शन तब मॉडल मान को चलाएगा और लौटाएगा।
उदाहरण:
```
<input type="text" ng-model="myFunc" ng-model-options="{'getterSetter': true}">

$scope.myFunc = function() {return "value";}
```
timezone : मॉडल के लिए टाइमज़ोन को परिभाषित करता है अगर इनपुट date या time । प्रकार

ngCloak

ngCloak निर्देश का उपयोग ngCloak एचटीएमएल टेम्प्लेट को ब्राउजर द्वारा उसके कच्चे (असूचीबद्ध) रूप में संक्षिप्त रूप से प्रदर्शित होने से रोकने के लिए किया जाता है, जबकि आपका एप्लिकेशन लोड हो रहा है। - देखें स्रोत

एचटीएमएल

<div ng-cloak>
  <h1>Hello {{ name }}</h1>
</div>

ngCloak को बॉडी एलिमेंट पर लागू किया जा सकता है, लेकिन ब्राउज़र व्यू के प्रगतिशील प्रतिपादन की अनुमति देने के लिए पेज के छोटे हिस्से में कई ngCloak निर्देशों को लागू करने के लिए पसंदीदा उपयोग है।

ngCloak निर्देश में कोई पैरामीटर नहीं है।

यह भी देखें: चंचलता को रोकना

ngInclude

एनजी-शामिल आपको पृष्ठ के एक हिस्से के नियंत्रण को एक विशिष्ट नियंत्रक को सौंपने की अनुमति देता है। आप ऐसा करना चाह सकते हैं क्योंकि उस घटक की जटिलता ऐसी होती जा रही है कि आप एक समर्पित नियंत्रक में सभी तर्क को बदलना चाहते हैं।

एक उदाहरण है:

  <div ng-include
       src="'/gridview'"
       ng-controller='gridController as gc'>
  </div>

ध्यान दें कि /gridview को वेब सर्वर द्वारा एक विशिष्ट और वैध यूआरएल के रूप में प्रस्तुत करना होगा।

इसके अलावा, ध्यान दें कि src -attribute एक कोणीय अभिव्यक्ति को स्वीकार करता है। यह एक चर या फ़ंक्शन कॉल हो सकता है उदाहरण के लिए या, इस उदाहरण में, एक स्ट्रिंग स्थिरांक। इस मामले में आपको स्रोत URL को एकल कोट्स में लपेटना सुनिश्चित करने की आवश्यकता है, इसलिए इसका मूल्यांकन एक स्ट्रिंग स्थिरांक के रूप में किया जाएगा। यह भ्रम का एक आम स्रोत है।

/gridview gridController html के भीतर, आप gridController को संदर्भित कर सकते हैं जैसे कि यह पृष्ठ के चारों ओर लिपटा हुआ था, जैसे:

<div class="row">
  <button type="button" class="btn btn-default" ng-click="gc.doSomething()"></button>
</div>

ngSrc

Src विशेषता में {{hash}} जैसे कोणीय मार्कअप का उपयोग करना सही काम नहीं करता है। ब्राउज़र शाब्दिक पाठ {{hash}} साथ URL से तब तक प्राप्त करेगा, जब तक कि कोणीय {{hash}} अंदर अभिव्यक्ति को बदल न दे। ng-src निर्देश छवि टैग तत्व के लिए मूल src विशेषता को ओवरराइड करता है और समस्या को हल करता है

<div ng-init="pic = 'pic_angular.jpg'">
    <h1>Angular</h1>
    <img ng-src="{{pic}}">
</div>

ngPattern

ng-pattern निर्देश एक अभिव्यक्ति को स्वीकार करता है जो एक नियमित अभिव्यक्ति पैटर्न का मूल्यांकन करता है और एक पाठ इनपुट को मान्य करने के लिए उस पैटर्न का उपयोग करता है।

उदाहरण:

मान लें कि हम चाहते हैं कि एक <input> तत्व वैध हो जाए जब यह मान (एनजी-मॉडल) एक मान्य आईपी पता हो।

टेम्पलेट:

<input type="text" ng-model="ipAddr" ng-pattern="ipRegex" name="ip" required>

नियंत्रक:

$scope.ipRegex = /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

ngValue

ng-repeat एनकैल्यू के तहत ज्यादातर इस्तेमाल किया जाता है जब एनकैपिट का उपयोग करके रेडियो बटन की सूचियों को गतिशील रूप से उत्पन्न किया जाता है

<script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.names = ['pizza', 'unicorns', 'robots'];
       $scope.my = { favorite: 'unicorns' };
     }]);
</script>
 <form ng-controller="ExampleController">
   <h2>Which is your favorite?</h2>
     <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <div>You chose {{my.favorite}}</div>
 </form>

काम कर रहे plnkr

ngCopy

ngCopy निर्देश व्यवहार को कॉपी ईवेंट पर चलाने के लिए निर्दिष्ट करता है।

किसी उपयोगकर्ता को डेटा की प्रतिलिपि बनाने से रोकें

<p ng-copy="blockCopy($event)">This paragraph cannot be copied</p>

कंट्रोलर में

$scope.blockCopy = function(event) {
    event.preventDefault();
    console.log("Copying won't work");
}

ngPaste

जब उपयोगकर्ता किसी सामग्री को चिपकाता है, तो उसे चलाने के लिए ngPaste निर्देश कस्टम व्यवहार निर्दिष्ट करता है

<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
pasted: {{paste}}

ngHref

अगर हम href मान के अंदर कोणीय भाव रखते हैं, तो href विशेषता के बजाय ngHref का उपयोग किया जाता है। एनजीएचईआरई निदेश एचटीएमएल टैग का उपयोग करके एचटीएमएल टैग के मूल href विशेषता को ओवरराइड करता है जैसे टैग, टैग आदि।

NgHref निर्देश यह सुनिश्चित करता है कि यदि उपयोगकर्ता ने कोड का मूल्यांकन किया है इससे पहले कि उपयोगकर्ता लिंक पर क्लिक करता है तो भी लिंक टूटा नहीं है।

उदाहरण 1

<div ng-init="linkValue = 'http://stackoverflow.com'">
    <p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p>
</div>

उदाहरण 2 यह उदाहरण गतिशील रूप से इनपुट बॉक्स से href मान प्राप्त करता है और इसे href मान के रूप में लोड करता है।

<input ng-model="value" />
<a id="link" ng-href="{{value}}">link</a>

उदाहरण 3

<script>
angular.module('angularDoc', [])
.controller('myController', function($scope) {
  // Set some scope value.
  // Here we set bootstrap version.
  $scope.bootstrap_version = '3.3.7';
   
  // Set the default layout value
  $scope.layout = 'normal';
});
</script>
<!-- Insert it into Angular Code -->
<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bootstrap_version }}/css/bootstrap.min.css">
<link rel="stylesheet" ng-href="layout-{{ layout }}.css">

ngList

ng-list निर्देश का उपयोग एक सीमांकित स्ट्रिंग को टेक्स्ट इनपुट से स्ट्रिंग्स के एक सरणी या इसके विपरीत में परिवर्तित करने के लिए किया जाता है।

ng-list निर्देश ", " (अल्पविराम स्थान) के एक डिफ़ॉल्ट सीमांकक का उपयोग करता है।

आप सीमांकक को मैन्युअल रूप से सेट कर सकते हैं ng-list इस ng-list="; " तरह एक परिधि ng-list="; " ।

इस मामले में सीमांकक एक अंतरिक्ष के बाद एक अर्ध उपनिवेश के लिए निर्धारित है।

डिफ़ॉल्ट ng-list में एक विशेषता ng-trim जो कि सच पर सेट है। ng-trim जब झूठे, आपके सीमांकक में सफेद स्थान का सम्मान करेंगे। जब तक आप ng-trim="false" सेट नहीं करते, डिफ़ॉल्ट रूप से, ng-list सफेद स्थान को ध्यान में नहीं रखती है।

उदाहरण:

angular.module('test', [])
  .controller('ngListExample', ['$scope', function($scope) {
    $scope.list = ['angular', 'is', 'cool!'];
}]);

एक ग्राहक परिसीमन होना तय है ; । और इनपुट बॉक्स का मॉडल उस सरणी पर सेट किया गया है जो दायरे पर बनाया गया था।

  <body ng-app="test" ng-controller="ngListExample">
    <input ng-model="list" ng-list="; " ng-trim="false">
  </body>

इनपुट बॉक्स सामग्री के साथ प्रदर्शित करेगा: angular; is; cool!

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

कोणीय भाव - पाठ बनाम संख्या

ngRepeat

ngShow और ngHide

ngOptions

ngModel

ngClass

ngIf

जावास्क्रिप्ट

राय

DOM यदि currentUser नहीं है, तो currentUser नहीं है

DOM यदि currentUser है

समारोह का वादा

ngMouseenter और ngMouseleave

ngDisabled

ngDblclick

बिल्ट-इन डायरेक्शंस चीट शीट

ngClick

ngRequired

एनजी मॉडल-विकल्प

ngCloak

ngInclude

ngSrc

ngPattern

ngValue

ngCopy

किसी उपयोगकर्ता को डेटा की प्रतिलिपि बनाने से रोकें

ngPaste

ngHref

ngList

DOM यदि `currentUser` नहीं है, तो `currentUser` नहीं है

DOM यदि `currentUser` है