AngularJS एनजी-अगर कई शर्तों के साथ

Question

मैं जानना चाहूंगा कि क्या ऐसा कुछ होना संभव है:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

यह जानते हुए कि आइटम एक JSON कंटेनर एक अनुरोध के माध्यम से प्राप्त होता है, इसलिए मैं एक कुंजी, मूल्य पद्धति का उपयोग कर रहा हूं।

धन्यवाद

मैं पूछ रहा हूं क्योंकि मैंने इसे गुगली करने की कोशिश की है, लेकिन केवल वही परिणाम मिल सकता है जो मैं साथ था ng-switch, लेकिन मुझे इसका उपयोग करना होगा ng-if।

Comments

जावास्क्रिप्ट में, या ऑपरेटर है ||।

— जेबी निज़ेट

Answer 1

जरूर आप कर सकते हो। कुछ इस तरह:

एचटीएमएल

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

जे एस

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

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

डेमो फिडल

Comments

यदि मेरे पास 20 इनपुट फ़ील्ड हैं और मुझे सबमिट बटन सक्षम करना होगा तभी सभी फ़ील्ड भरेंगे। इस मामले में, मुझे कई शर्तों को शामिल करना होगा। यह थोड़ा भ्रमित करने वाला है। क्या कोई अन्य संभव समाधान है?

— Mr_Perfect

@CharanCherry कोणीय रूप सत्यापन में देखें। इस तरह से आप सभी वांछित क्षेत्रों को एनजी-सेट कर सकते हैं और फॉर्म वैधता के लिए जांच कर सकते हैं उदाहरण के लिए सबमिट बटन पर एनजी-अक्षम अभिव्यक्ति। cfr fdietz.github.io/recipes-with-angular-js/use-forms/…

— Gecko IT

Answer 2

या ऑपरेटर:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

भले ही यह पढ़ने में काफी सरल है, मुझे आशा है कि एक डेवलपर के रूप में आप 'a' 'k' 'b' आदि नामों से बेहतर नामों का उपयोग कर रहे हैं।

उदाहरण के लिए:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

एक और या उदाहरण

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

और ऑपरेटर (इस स्टैकओवरफ़्लो के जवाब में ठोकर खाने वालों के लिए और स्थिति के बजाय एक की तलाश में है)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Comments

ठीक है, इसलिए सभी ब्राउज़र &एक मान्य चरित्र के रूप में पहचानते हैं । लेकिन यह उल्लेख किया जाना चाहिए कि &एक विशेषता में उपयोग करना वैध HTML नहीं है। < Html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, और अधिक विशेष रूप से देखें: "विशेषता मान पाठ और वर्ण संदर्भों का मिश्रण है, अतिरिक्त प्रतिबंध के साथ कि पाठ में अस्पष्ट एम्परसेंड नहीं हो सकता है। " यह उत्तर भी देखें: < stackoverflow.com/a/5320217/788553 >

— jmlopez

अगर हमें कोणीय कार्य करने के लिए html में यौगिक कथनों का उपयोग करना चाहिए तो मैं यौगिक कथनों को कार्यक्षेत्र से जुड़े फ़ंक्शन में रखना पसंद करूँगा, इस प्रकार उस तर्क को html अनुभाग से दूर कर दूंगा।

— jmlopez

HTML5 को कोणीय को ध्यान में रखकर नहीं लिखा गया था। इसके बजाय गूगल पर प्रतिभाशाली लोगों ने इसके बजाय कोणीय लिखा - कल्पना का लाभ उठाएं और इस प्रकार "&" के साथ एक कोणीय अभिव्यक्ति लिखना बहुत सामान्य है। निश्चित रूप से, मैं व्यू में व्यावसायिक नियम नहीं रखना पसंद करता हूं, ठीक उसी तरह जब मैं रेजर व्यू पेज asp.net MVC में करता हूं, लेकिन मेरा उत्तर पूरी तरह से पूछे जाने वाले प्रश्न के संदर्भ में है।

— टॉम स्टिकेल

आपके उत्तर के साथ कुछ भी गलत नहीं है टॉम, मैं आपके द्वारा दिखाए गए यौगिक विवरण भी लिखता हूं क्योंकि मैं आलसी हूं (या जल्दी में), और यह काम करता है। लेकिन फिर मुझे हमेशा बच निकलने के बारे में यह नियम याद है &। यही कारण है कि मैं आपके जवाब पर लड़खड़ा गया। मैं बस उन लिंक को वहाँ डाल देना चाहता था जिससे लोगों को HTML युक्ति के बारे में पता चल सके, जैसे आपने कहा, "HTML5 को मन में कोणीय के साथ नहीं लिखा गया था"।

— jmlopez

Answer 3

यदि आप कंडोम को काम की तुलना में सही मानते हैं, तो आप अनिवार्य कॉन्स्टेंस के लिए && के साथ भी प्रयास कर सकते हैं

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

Answer 4

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

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Answer 5

HTML कोड

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

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

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Comments

क्या आप कृपया अपने उत्तरों को एक में जोड़ सकते हैं और दूसरे को हटा सकते हैं?

— टॉम एम