css - html attributes list




ما هي أفضل طريقة لتطبيق الفصل الدراسي بشكل مشروط؟ (15)

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

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


جزئي

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

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

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

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

آمل أن يساعد.


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

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

إذا كنت تملك فصلًا مشتركًا يتم تطبيقه على العديد من العناصر ، يمكنك إنشاء أمر مخصص سيضيف ذلك الفصل مثل 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');
    });
  };
}]);

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


تحقق من 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 }

شكرا امادو


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

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

انظر: ng-class


في ما يلي خيار آخر يعمل جيدًا عندما لا يمكن استخدام ng-class (على سبيل المثال عند تصميم SVG):

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

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


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

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

وفي جهاز التحكم الخاص بك تحقق من الشرط

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

من المحتمل أن ينخفض ​​هذا الأمر إلى النسيان ، ولكن هنا كيف استخدمت معاملات الثلاثي 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>

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

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

هنا هو الحل أبسط من ذلك بكثير:

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>


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

  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>

يعمل بشكل صحيح؛)

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

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

// 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})} />

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

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

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




angularjs