AngularJS ng-if มีหลายเงื่อนไข


151

ฉันอยากรู้ว่าเป็นไปได้ไหมที่มีสิ่งนี้:

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

การรู้ว่ารายการนั้นเป็นคอนเทนเนอร์ JSON ที่ได้รับจากคำขอดังนั้นฉันจึงใช้เมธอด key และ value

ขอบคุณ

ฉันขอเพราะผมได้พยายาม googling แต่ผลเดียวที่ฉันจะได้อยู่ด้วยแต่ผมต้องใช้ng-switchng-if


3
ใน JavaScript, ||หรือผู้ประกอบการคือ
JB Nizet

คำตอบ:


194

แน่นอนว่าคุณสามารถ สิ่งที่ต้องการ:

HTML

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

JS

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'];

สาธิตซอ


หากฉันมีช่องป้อนข้อมูล 20 ช่องและฉันต้องเปิดใช้งานปุ่มส่งเฉพาะเมื่อช่องกรอกข้อมูลทั้งหมด ในกรณีนี้ฉันต้องรวมเงื่อนไขมากมาย นี่คือความสับสนเล็กน้อย มีวิธีอื่นที่เป็นไปได้หรือไม่?
Mr_Perfect

@ CharanCherry พิจารณาการตรวจสอบรูปแบบเชิงมุม ด้วยวิธีนี้คุณสามารถตั้งค่าฟิลด์ที่ต้องการ ng-required และตรวจสอบความถูกต้องของแบบฟอร์มในตัวอย่างนิพจน์ที่ปิดใช้งาน ng บนปุ่มส่ง cfr fdietz.github.io/recipes-with-angular-js/using-forms/ …
ตุ๊กแกไอที

76

หรือผู้ประกอบการ:

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

ตัวดำเนินการ AND (สำหรับผู้ที่สะดุดข้ามคำตอบสแต็คโอเวอร์โฟลว์นี้มองหาเงื่อนไข AND แทน OR)

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

ตกลงดังนั้นเบราว์เซอร์ทั้งหมดดูเหมือนจะรับรู้&ว่าเป็นอักขระที่ถูกต้อง แต่ควรกล่าวว่าการใช้&ในแอตทริบิวต์นั้นไม่ถูกต้อง html ดู < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes > โดยเฉพาะอย่างยิ่ง: "ค่าแอตทริบิวต์เป็นส่วนผสมของการอ้างอิงข้อความและตัวอักษรยกเว้นข้อ จำกัด เพิ่มเติมที่ข้อความไม่สามารถมีแอมเปอร์คลุมเครือ " ดูคำตอบนี้: < stackoverflow.com/a/5320217/788553 >
jmlopez

หากเราต้องใช้คำสั่งผสมใน html เพื่อทำให้งานเชิงมุมฉันต้องการที่จะนำคำสั่งผสมในฟังก์ชั่นที่แนบมากับขอบเขตจึงลบตรรกะนั้นออกจากส่วน html
jmlopez

HTML5 ไม่ได้เขียนโดยคำนึงถึง Angular แทนที่จะเป็นคนที่เก่งที่ google เขียน Angular แทน - ใช้ประโยชน์จากข้อมูลจำเพาะแล้วจึงเขียน Angular Expression ด้วย "&" เป็นเรื่องปกติ แน่นอนว่าฉันไม่ต้องการวางกฎเกณฑ์ทางธุรกิจไว้ในมุมมองเหมือนกับเมื่อฉันสร้างหน้ามีดโกนดูใน asp.net MVC แต่คำตอบของฉันอยู่ในบริบทของคำถามที่ถูกถาม
Tom Stickel

1
ไม่มีอะไรผิดปกติกับคำตอบของคุณทอมฉันยังเขียนคำประสมแบบที่คุณแสดงเพราะฉันขี้เกียจ (หรือรีบ) และมันก็ใช้ได้ &แต่แล้วผมจำไว้เสมอว่ากฎนี้เกี่ยวกับการหลบหนี นี่คือเหตุผลที่ฉันสะดุดกับคำตอบของคุณ ฉันแค่อยากจะใส่ลิงค์เหล่านั้นไว้ที่นั่นเพื่อให้ผู้คนรับรู้ถึงข้อมูลจำเพาะ HTML อย่างที่คุณพูด "HTML5 ไม่ได้เขียนขึ้นโดยคำนึงถึง Angular"
jmlopez

1

นอกจากนี้คุณยังสามารถลองใช้กับ && สำหรับกลุ่มดาวบังคับหากเงื่อนไขทั้งสองเป็นจริงมากกว่างาน

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

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

0

รหัสจาวาสคริปต์

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";
}
}

0

รหัส 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";
}
}

คุณช่วยรวมคำตอบของคุณเป็นคำตอบเดียวแล้วลบคำตอบอื่น ๆ
Tom M
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.