it-swarm.asia

ما هي أفضل طريقة لتطبيق الفصل بشروط؟

لنفترض أن لديك صفيفًا يتم تقديمه في ul مع li لكل عنصر وخاصية على وحدة التحكم تسمى selectedIndex. ما هي أفضل طريقة لإضافة فئة إلى li مع الفهرس selectedIndex في AngularJS؟

أقوم حاليًا بتكرار (يدويًا) رمز li وإضافة الفئة إلى إحدى علامات li واستخدام ng-show و ng-hide لإظهار li واحد فقط لكل فهرس.

1162
respectTheCode

إذا كنت لا ترغب في وضع أسماء فصول CSS في وحدة التحكم مثلما أفعل ، فإليك خدعة قديمة أستخدمها منذ أيام ما قبل الإصدار الأول. يمكننا كتابة تعبير يقيم مباشرة إلى اسم فئة محدد ، لا توجد توجيهات مخصصة ضرورية:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

يرجى ملاحظة بناء الجملة القديم مع القولون.

هناك أيضًا طريقة جديدة أفضل لتطبيق الفئات بشروط ، مثل:

ng-class="{selected: $index==selectedIndex}"

الزاوي الآن يدعم التعبيرات التي ترجع كائن. تعتبر كل خاصية (اسم) لهذا الكائن الآن اسمًا للفئة ويتم تطبيقها اعتمادًا على قيمتها.

لكن هذه الطرق ليست متساوية وظيفيا. هنا مثال:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

لذلك ، يمكننا إعادة استخدام فئات CSS الحالية عن طريق تعيين خاصية نموذجية في الأساس لاسم فئة وفي نفس الوقت الحفاظ على فئات CSS خارج رمز المراقب المالي.

1378
orcun

ng-class يدعم تعبيرًا يجب تقييمه لأي منهما

  1. سلسلة من أسماء الفئات المحددة بفراغ ، أو
  2. مجموعة من أسماء الفئات ، أو
  3. خريطة/كائن أسماء الفئات للقيم المنطقية.

لذلك ، باستخدام النموذج 3) يمكننا ببساطة الكتابة

ng-class="{'selected': $index==selectedIndex}"

راجع أيضًا كيف يمكنني تطبيق أنماط CSS بشكل مشروط في AngularJS؟ للحصول على إجابة أوسع.


تحديث : Angular 1.1.5 أضاف دعمًا لمشغل ternary ، لذلك إذا كان هذا الإنشاء أكثر دراية بك:

ng-class="($index==selectedIndex) ? 'selected' : ''"
434
Mark Rajcok

طريقتي المفضلة هي استخدام التعبير الثلاثي.

ng-class="condition ? 'trueClass' : 'falseClass'"

ملاحظة: في حال كنت تستخدم إصدارًا أقدم من Angular ، يجب عليك استخدام هذا بدلاً من ذلك ،

ng-class="condition && 'trueClass' || 'falseClass'"
158
skmvasu

سأضيف إلى هذا ، لأن بعض هذه الإجابات تبدو قديمة. إليك كيف أفعل ذلك:

<class="ng-class:isSelected">

حيث 'isSelected' هو متغير javascript معرف ضمن وحدة التحكم الزاوية ذات النطاق.


ولمعالجة سؤالك بشكل أكثر تحديدًا ، إليك كيفية إنشاء قائمة بها:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


انظر: http://jsfiddle.net/tTfWM/

انظر: http://docs.angularjs.org/api/ng.directive:ngClass

54
stefano

إليك حل أبسط بكثير:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>
46
user81962

واجهت مشكلة مشابهة مؤخرًا وقررت إنشاء فلتر شرطي:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

يستغرق وسيطة واحدة ، والتي هي إما صفيف 2-عنصر أو سلسلة ، والتي يتم تحويلها إلى صفيف إلحاق سلسلة فارغة كعنصر ثاني:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>
26
Lèse majesté

إذا كنت ترغب في تجاوز التقييم الثنائي والحفاظ على CSS الخاص بك خارج وحدة التحكم الخاصة بك ، يمكنك تنفيذ عامل تصفية بسيط يقوم بتقييم الإدخال مقابل كائن مخطط:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

يسمح لك هذا بكتابة علاماتك مثل هذا:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>
21
Joe Steele

وقد فعلت ذلك مؤخرا كان القيام بذلك:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

القيمة isShowing هي قيمة موجودة على جهاز التحكم الخاص بي يتم تبديلها بنقرة زر واحدة والأجزاء الموجودة بين قوسين فرديين هي فئات أنشأتها في ملف css الخاص بي.

تحرير: أود أيضًا أن أضيف أن codeschool.com يحتوي على دورة مجانية برعاية google على AngularJS تتجاوز كل هذه الأشياء ثم بعضها. ليست هناك حاجة للدفع مقابل أي شيء ، فقط قم بالتسجيل للحصول على حساب وتذهب! حظا سعيدا لكم جميعا!

16
Pytth

المشغل الثلاثي تم للتو إضافته إلى المحلل اللغوي الزاوي في 1.1.5 .

لذا فإن أبسط طريقة للقيام بذلك هي الآن:

ng:class="($index==selectedIndex)? 'selected' : ''"
15
lionroots

يمكننا جعل وظيفة لإدارة فئة العودة مع شرط

 enter image description here

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</script>

وثم

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

يمكنك الرجوع إلى صفحة الرموز الكاملة في ng-class إذا كان المثال

11
Lewis Hai

هذا يعمل مثل السحر ؛)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>
9
Aliti

أنا جديد على Angular لكنني وجدت هذا لحل مشكلتي:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

سيؤدي هذا إلى تطبيق الفصل على شرط var. يبدأ بـ icon-download كإعداد افتراضي ، باستخدام فئة ng ، أتحقق من حالة showDetails إذا true/false وأطبق class icon-upload . لها عمل عظيم.

آمل أن يساعد.

9
Ravi Ram

من المحتمل أن يتم تخفيض هذا الأمر إلى درجة النسيان ، ولكن إليك كيفية استخدام عوامل التشغيل الثلاثية لـ 1.1.5 للتبديل بين الفئات وفقًا لما إذا كان الصف في الجدول هو الأول أو المتوسط ​​أو الأخير - إلا إذا كان هناك صف واحد فقط في الجدول:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>
5
sundar

إليك خيار آخر يعمل بشكل جيد عندما يتعذر استخدام فئة ng (على سبيل المثال عند تصميم SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(أعتقد أنك بحاجة إلى أن تكون غير مستقر على أحدث تقديرAngular لاستخدام ng-attr- ، أنا حاليًا في 1.1.4)

4
Ashley Davis

جزئي

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

مراقب

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };
4
Caner Çakmak

حسنا أود أن أقترح عليك التحقق من حالة في وحدة التحكم الخاصة بك مع وظيفة العودة صحيح أو خطأ .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

وفي وحدة التحكم الخاصة بك تحقق من حالة

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
4
sheelpriy

هذا في عملي القاضي متعددة مشروط:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
4
H.jame

مجرد إضافة شيء كان يعمل لي اليوم ، بعد الكثير من البحث ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

نأمل أن يكون هذا يساعد في التنمية الناجحة.

=)

صيغة التعبير غير الموثقة: رابط موقع إلكتروني رائع ... =)

3
Robert Green MBA

إذا كان لديك فئة مشتركة يتم تطبيقها على العديد من العناصر ، يمكنك إنشاء توجيه مخصص يضيف تلك الفئة مثل ng-show/ng-hide.

سيضيف هذا التوجيه الفصل "نشط" إلى الزر إذا تم النقر فوقه

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

مزيد من المعلومات

3
lars1595

إذا كنت تستخدم الزاوي pre v1.1.5 (أي لا يوجد عامل تشغيل ثلاثي) وما زلت تريد طريقة مكافئة لتعيين قيمة في كلاهما شروط يمكنك القيام بشيء مثل هذا:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
3
Scotty.NET

تحقق http://www.codinginsight.com/angularjs-if-else-statement/

و angularjs سيئة السمعة إذا بيان آخر !!! عندما بدأت في استخدام Angularjs ، فوجئت قليلاً بأنه لا يمكنني العثور على عبارة if/else.

لذلك كنت أعمل في مشروع ولاحظت أنه عند استخدام عبارة if/else ، تظهر الحالة أثناء التحميل. يمكنك استخدام ng-cloak لإصلاح هذا.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

شكرا امادو

3
Victor Cruz

يمكنك استخدام هذا حزمة npm. يتعامل مع كل شيء ولديه خيارات للفئات الثابتة والشرطية بناءً على متغير أو دالة.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
0
Tushar Sharma