AngularJS এনজি-যদি একাধিক শর্তের সাথে থাকে

Question

এই জাতীয় কিছু পাওয়া সম্ভব কিনা তা আমি জানতে চাই:

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

আইটেমগুলি একটি অনুরোধের মাধ্যমে প্রাপ্ত জেএসএন কনটেইনার তা জেনে তাই আমি কী, মান পদ্ধতিটি ব্যবহার করছি।

ধন্যবাদ

আমি জিজ্ঞাসা করছি কারণ আমি এটি গুগল করার চেষ্টা করেছি, তবে আমি যে ফলাফল পেতে পারি তা কেবলই ছিল 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 ইনপুট ক্ষেত্র থাকে এবং আমাকে সমস্ত ক্ষেত্রগুলি পূরণ করা হলে কেবল সাবমিট বাটনটি সক্ষম করতে হবে। এই ক্ষেত্রে, আমাকে অনেক শর্ত অন্তর্ভুক্ত করতে হবে। এটি কিছুটা বিভ্রান্তিকর। অন্য কোন সম্ভাব্য সমাধান আছে?

— মিঃ_পরিফেক্ট

@ চরণচেরি কৌণিক ফর্ম বৈধতা একবার দেখুন এইভাবে আপনি সমস্ত কাঙ্ক্ষিত ক্ষেত্রগুলি এনজি-প্রয়োজনীয় সেট করতে পারেন এবং ফর্মের বৈধতার জন্য উদাহরণস্বরূপ সাবমিট বাটনে একটি এনজি-অক্ষম এক্সপ্রেশন। CFR fdietz.github.io/recipes-with-angular-js/using-forms/...

— গেকো আইটি

Answer 2

বা অপারেটর:

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

যদিও এটি পড়ার পক্ষে যথেষ্ট সহজ, আমি আশা করি বিকাশকারী হিসাবে আপনি 'এ' 'কে' বি 'ইত্যাদির চেয়ে আরও ভাল নাম ব্যবহার করছেন ..

উদাহরণ স্বরূপ:

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

অন্য একটি OR উদাহরণ

<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.spec.whatwg.org/m Multipage/syntax.html#syntax-attributes > দেখুন, আরও সুনির্দিষ্টভাবে উল্লেখ করুন: "অতিরিক্ত মানগুলি পাঠ্য এবং চরিত্রের রেফারেন্সের মিশ্রণ, অতিরিক্ত সীমাবদ্ধতা ব্যতীত পাঠ্যে একটি দ্ব্যর্থক অ্যাম্পারস্যান্ড থাকতে পারে না। " এই উত্তরটি দেখুন: < stackoverflow.com/a/5320217/788553 >।

— jMLopez

কৌণিক কাজ করার জন্য যদি আমাদের অবশ্যই এইচটিএমএলে যৌগিক বিবৃতি ব্যবহার করা উচিত তবে আমি যৌগিক বিবৃতিগুলি সুযোগের সাথে যুক্ত কোনও ফাংশনে রেখে দিতে পছন্দ করব, এইভাবে এই যুক্তিকে এইচটিএমএল বিভাগ থেকে দূরে সরিয়ে ফেলব।

— jMLopez

এইচটিএমএল 5 এঙ্গুলার মাথায় রেখে লেখা হয়নি। পরিবর্তে গুগলে উজ্জ্বল ছেলেরা এর পরিবর্তে অ্যাংুলার লিখেছিল - এই অনুমানের সুবিধা নিন এবং এইভাবে "&" দিয়ে একটি কৌণিক অভিব্যক্তি লেখা খুব স্বাভাবিক। অবশ্যই, আমি এপ নেটওয়্যার এমভিসিতে রেজার ভিউ পৃষ্ঠাগুলির মতোই ভিউতে ব্যবসায়ের নিয়ম না রাখাই পছন্দ করি, তবে আমার উত্তরটি জিজ্ঞাসা করা প্রশ্নের প্রসঙ্গেই পুরোপুরি।

— টম স্টিকেল

আপনার উত্তর টমের সাথে কোনও ত্রুটি নেই, আপনি যেগুলি দেখান তার মতো আমি যৌগিক বিবৃতিও লিখি কারণ আমি অলস (বা তাড়াতাড়ি), এবং এটি কার্যকর হয়। তবে তারপরে পালানোর বিষয়ে আমি এই নিয়মটি সবসময় মনে করি &। এই কারণেই আমি আপনার উত্তরে হোঁচট খেয়েছি। আমি এই লিঙ্কগুলি কেবল সেখানে এইচটিএমএল অনুমান সম্পর্কে সচেতন করার জন্য সেখানে রাখতে চেয়েছিলাম, যেমন আপনি বলেছিলেন, "এইচটিএমএল 5 অ্যাঙ্গুলার মাথায় রেখে লেখা হয়নি"।

— 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

এইচটিএমএল কোড

<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

আপনি কি দয়া করে নিজের উত্তরগুলি একের সাথে সংযুক্ত করে অন্যটি মুছতে পারেন?

— টম এম