පංතියක් කොන්දේසි සහිතව යෙදිය හැකි හොඳම ක්‍රමය කුමක්ද?

එක් එක් මූලද්‍රව්‍යය සඳහා a ulසමඟ විදැහුම් කරන ලද අරාව liසහ පාලකයේ ඇති දේපලක් ඇති බව කියමු selectedIndex. AngularJS liහි දර්ශකය සමඟ පන්තියක් එක් කිරීමට හොඳම ක්‍රමය selectedIndexකුමක්ද?

මම දැනට පිටපත් සිටිමි (අතින්) liකේතය හා එක් කිරීමට පන්ති එකතු liටැග් හා භාවිතා ng-showසහ ng-hideඑකම එක පෙන්වන්න liදර්ශකය අනුව.

මා වැනි CSS පන්ති නම් පාලකයට ඇතුළත් කිරීමට ඔබට අවශ්‍ය නැතිනම්, පෙර-දින 1 සිට මම භාවිතා කරන පැරණි උපක්‍රමයක් මෙන්න. තෝරාගත් පන්තියේ නමකට කෙලින්ම ඇගයීමට ලක් කරන ප්‍රකාශනයක් අපට ලිවිය හැකිය , අභිරුචි නියෝග අවශ්‍ය නොවේ:

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

කරුණාකර බඩවැල් සමඟ පැරණි වාක්‍ය ඛණ්ඩය සටහන් කරන්න.

කොන්දේසි සහිතව පන්ති යෙදීම සඳහා වඩා හොඳ නව ක්‍රමයක් ද ඇත:

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

කෝණික දැන් වස්තුවක් ආපසු ලබා දෙන ප්‍රකාශන සඳහා සහය දක්වයි. මෙම වස්තුවේ එක් එක් දේපල (නම) දැන් පන්ති නාමයක් ලෙස සලකනු ලබන අතර එහි වටිනාකම අනුව එය අදාළ වේ.

කෙසේ වෙතත් මෙම ක්‍රම ක්‍රියාකාරීව සමාන නොවේ. මෙන්න උදාහරණයක්:

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

එබැවින් අපට දැනට පවතින CSS පංති නැවත භාවිතා කළ හැක්කේ මූලික වශයෙන් ආදර්ශ දේපලක් පන්ති නාමයකට සිතියම් ගත කිරීමෙන් සහ ඒ සමඟම CSS පන්ති පාලක කේතයෙන් බැහැරව තබා ගැනීමෙනි.

ng-class විසින් ප්‍රකාශනයකට සහාය දැක්විය යුතුය

1. අවකාශයෙන් වෙන් කරන ලද පන්ති නම් මාලාවක්, හෝ
2. පන්ති නම් පෙළක්, හෝ
3. බූලියන් අගයන්ට පන්ති නම් සිතියමක් / වස්තුවක්.

එබැවින්, 3 වන ආකෘතිය භාවිතා කරමින්) අපට සරලව ලිවිය හැකිය

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

මෙයද බලන්න මම කොන්දේසිය AngularJS දී CSS විලාසයන් අයදුම් කරන්නේ කෙසේද? පුළුල් පිළිතුරක් සඳහා.

යාවත්කාලීන කිරීම : කෝණික 1.1.5 මඟින් ත්‍රිමාණ ක්‍රියාකරු සඳහා සහය එක් කර ඇත , එබැවින් එම ඉදිකිරීම ඔබට වඩාත් හුරුපුරුදු නම්:

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

මගේ ප්‍රියතම ක්‍රමය වන්නේ ත්‍රික ප්‍රකාශනය භාවිතා කිරීමයි.

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

සටහන: ඔබ කෝණික පැරණි අනුවාදයක් භාවිතා කරන්නේ නම් ඒ වෙනුවට ඔබ මෙය භාවිතා කළ යුතුය,

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

මෙම පිළිතුරු සමහරක් යල්පැන ඇති බැවින් මම මේ සඳහා එකතු කරමි. මෙන්න මම එය කරන ආකාරය:

<class="ng-class:isSelected">

කොහේද 'isSelected' යනු විෂය පථයේ කෝණික පාලකය තුළ අර්ථ දක්වා ඇති ජාවාස්ක්‍රිප්ට් විචල්‍යයකි.


ඔබේ ප්‍රශ්නය වඩාත් නිශ්චිතව ආමන්ත්‍රණය කිරීම සඳහා, ඔබ එය සමඟ ලැයිස්තුවක් ජනනය කරන්නේ කෙසේද යන්න මෙන්න:

HTML

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

ජේ

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

මෙන්න වඩාත් සරල විසඳුමක්:

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>

ඔබට ද්විමය ඇගයීමෙන් ඔබ්බට ගොස් ඔබේ CSS ඔබගේ පාලකයෙන් keep ත් කර තැබීමට අවශ්‍ය නම් සිතියම් වස්තුවකට එරෙහිව ආදානය තක්සේරු කරන සරල පෙරණයක් ක්‍රියාත්මක කළ හැකිය:

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>

මම මෑතකදී කළ දෙය මෙයයි:

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

මෙම isShowingඅගය බොත්තමක් ටොගල ලක්වෙයි හා තනි වරහන අතර කොටස් මගේ CSS ගොනු නිර්මාණය පන්ති බව මගේ පාලකය මත පිහිටා ඇත බව අගය වේ.

සංස්කරණය කරන්න: කෝඩ්ස්කූල්.කොම් හි නොමිලේ පා course මාලාවක් ඇති බව මම එකතු කිරීමට කැමැත්තෙමි. එය ගූගල් විසින් ඇන්ගුලර් ජේඑස් හි අනුග්‍රහය දක්වන අතර මේ සියල්ල ඉක්මවා ගොස් ඇත. කිසිවක් සඳහා ගෙවීමට අවශ්‍ය නැත, ගිණුමක් සඳහා ලියාපදිංචි වී ඉදිරියට යන්න! ඔබ සැමට සුබ පැතුම්!

මිශ්ර ක්රියාකරු පමණක් වී ඇත තුල කෝණික ව්යාකරණ විග්රහ එකතු 1.1.5 .

එබැවින් මෙය කිරීමට ඇති සරලම ක්‍රමය දැන්:

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

කොන්දේසි සහිතව ආපසු පන්තිය කළමනාකරණය කිරීම සඳහා අපට ශ්‍රිතයක් කළ හැකිය

<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 හි සම්පූර්ණ කේත පිටුවට යොමු විය හැකිය

මම කෝණිකයට අලුත් නමුත් මගේ ගැටලුව විසඳීම සඳහා මෙය සොයාගෙන ඇත:

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

මෙය කොන්දේසි මත පදනම්ව var මත පදනම් වූ පන්තියක් අදාළ වේ. එය ආරම්භ වන්නේ පෙරනිමියෙන් අයිකන බාගත කිරීමෙනි, ng-class භාවිතා කරමින්, මම showDetailsif හි තත්වය පරීක්ෂා කර true/falseපන්තියේ නිරූපක-උඩුගත කිරීම යොදමි . එහි ක්‍රියාකාරිත්වය විශිෂ්ටයි.

එය උපකාරී වේ යැයි සිතමි.

මෙය චාම් එකක් මෙන් ක්‍රියා කරයි;)

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

මෙය බොහෝ විට අමතක වීමට පහත් වනු ඇත, නමුත් මෙන්න මම වගුවක පේළියක් පළමු, මැද හෝ අන්තිමද යන්න මත පදනම්ව පන්ති මාරු කිරීම සඳහා 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>

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

අර්ධ

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

ඔබ කෝණික පෙර 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');
    });
  };
}]);

වැඩි විස්තර

බොහෝ සෙවීම් වලින් පසුව, අද මට වැඩ කළ දෙයක් එකතු කිරීම ...

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

මෙය ඔබේ සාර්ථක සංවර්ධනයට උපකාරී වේ යැයි සිතමු.

=)

ලේඛනගත නොකළ ප්‍රකාශන වාක්‍ය ඛණ්ඩය: විශිෂ්ට වෙබ් අඩවි සබැඳිය ... =)

මෙය පරීක්ෂා කරන්න .

කුප්‍රකට AngularJS if|elseප්‍රකාශය !!!
මම Angularjs භාවිතා කිරීමට පටන් ගත් විට, මට / / වෙනත් ප්‍රකාශයක් සොයා ගැනීමට නොහැකි වීම ගැන මම ටිකක් පුදුමයට පත් වීමි.

ඒ නිසා මම ව්‍යාපෘතියක වැඩ කරමින් සිටි අතර 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 }

ස්තූතියි අමදූ

ඔබට මෙම 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})} />