Anda dapat merujuk ke kode penuh halaman di ng-kelas jika misalnya
Saya baru ke Sudut tetapi telah menemukan ini untuk memecahkan masalah saya:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
Ini akan kondisional menerapkan kelas berbasis pada var.
Ini dimulai dengan icon-download sebagai default, menggunakan ng-kelas, saya memeriksa status showDetails
jika true/false
dan menerapkan kelas ikon-upload. Kerja besar.
Semoga membantu.
Ini bekerja seperti pesona ;)
<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>
Ini mungkin akan mendapatkan downvoted untuk dilupakan, tapi di sini adalah bagaimana saya digunakan 1.1.5's ternary operator untuk beralih kelas tergantung pada apakah sebuah baris dalam tabel adalah yang pertama, di tengah atau di akhir -- kecuali jika hanya ada satu baris dalam tabel:
<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>
Ini adalah pekerjaan saya beberapa persyaratan hakim:
<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> |
<span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
<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"
}
};
nah saya akan menyarankan anda untuk memeriksa kondisi di controller dengan fungsi kembali sejati atau palsu .
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
dan di controller memeriksa kondisi
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
Berikut adalah pilihan lain yang bekerja dengan baik ketika ng-kelas dapat't yang akan digunakan (misalnya ketika styling SVG):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(Saya pikir anda harus paling tidak stabil Sudut untuk menggunakan ng-ora-, I'm saat ini di 1.1.4)
Hanya menambahkan sesuatu yang bekerja untuk saya hari ini, setelah banyak mencari...
<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">
Semoga ini bisa membantu anda sukses pembangunan.
=)
Cek http://www.codinginsight.com/angularjs-if-else-statement/
Terkenal angularjs jika pernyataan lain!!! Ketika saya mulai menggunakan Angularjs, saya sedikit terkejut bahwa saya tidak bisa menemukan jika pernyataan/lain.
Jadi saya bekerja pada sebuah proyek dan saya melihat bahwa ketika menggunakan if/else pernyataan, kondisi tersebut menunjukkan saat loading. Anda dapat menggunakan ng-jubah untuk memperbaiki hal ini.
<div class="ng-cloak">
<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>
</div>
.ng-jubah { display: none }
Terima kasih amadou
Jika anda memiliki sebuah kelas umum yang diterapkan untuk banyak elemen yang anda dapat membuat kustom, petunjuk yang akan menambah kelas yang suka ng-show/ng-sembunyi.
Direktif ini akan menambah kelas 'aktif' untuk tombol jika itu's diklik
module.directive('ngActive', ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
$animate[value ? 'addClass' : 'removeClass'](element, 'active');
});
};
}]);