Gaurav Aggarwal Gaurav Aggarwal - 3 months ago 9
HTML Question

Angularjs change text according to true false status

I am making a box with ng-repeat here is the html

<div class="mission_box clearfix" ng-repeat="mission in missions">
<img src="images/tick_patch.png" class="expired_img">
<h2>{{mission.name}}</h2>
<p class="clearfix"><em>Win</em> <span><img src="images/crown.png"> {{mission.crownwin}} Crowns</span> <span><img src="images/voucher.png"> {{mission.voucherwin}} Voucher</span></p>
<div class="progress_box_outer clearfix">
<div class="progress_box">
<span style="width:{{100/mission.tasktotal*mission.taskdone}}%"></span>
</div>
<p class="progress_count">{{mission.taskdone}}/{{mission.tasktotal}}</p>
</div>
<div class="expiry_date">
<p>{{mission.expiry | missionexpire}}</p>
</div>
</div>


And here is the defined array in controller for this

$scope.missions = [
{'name':'3 Start Checkins', 'crownwin':'100', 'voucherwin':'flipkart','tasktotal':'4','taskdone':'3','expiry':'Expire on 25/06','isexpired':false,'iscompleted':true},
{'name':'3 Start Checkins', 'crownwin':'100', 'voucherwin':'flipkart','tasktotal':'4','taskdone':'2','expiry':'Expire on 25/06','isexpired':false,'iscompleted':true}
]


And filter i have created yet

.filter('missionexpire', function(){
return function(input){
if(input == true){
input = 'Completed'
} else {
input = input
}
}
})


In the above code you can see the last div in html with class
.expiry_date
i have defined filter in that.

What exactly i want is to change the text of
{{mission.expiry}}
if the status of
{{mission.iscomplete}}
is true.

Any help is appreciated. Thanks.

Answer

You could simply achieve this without a filter. Just use a conditional expression like

<p>{{mission.iscompleted === true?'Completed': mission.expiry}}</p>

angular.module('app', []).controller('AppController', function($scope) {
  $scope.missions = [{
    'name': '3 Start Checkins',
    'crownwin': '100',
    'voucherwin': 'flipkart',
    'tasktotal': '4',
    'taskdone': '3',
    'expiry': 'Expire on 25/06',
    'isExpired': false,
    'iscompleted': true
  }, {
    'name': '3 Start Checkins',
    'crownwin': '100',
    'voucherwin': 'flipkart',
    'tasktotal': '4',
    'taskdone': '2',
    'expiry': 'Expire on 25/06',
    'isExpired': true,
    'iscompleted': false
  }, {
    'name': '3 Start Checkins',
    'crownwin': '100',
    'voucherwin': 'flipkart',
    'tasktotal': '4',
    'taskdone': '2',
    'expiry': 'Expire on 25/06',
    'isExpired': false,
    'iscompleted': false
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="AppController">
    <div class="mission_box clearfix" ng-repeat="mission in missions">
      <h2>{{mission.name}}</h2>
      <p class="clearfix"><em>Win</em>  <span>{{mission.crownwin}} Crowns</span>  <span> {{mission.voucherwin}} Voucher</span>
      </p>
      <div class="progress_box_outer clearfix">
        <div class="progress_box">
          <span style="width:{{100/mission.tasktotal*mission.taskdone}}%"></span>
        </div>
        <p class="progress_count">{{mission.taskdone}}/{{mission.tasktotal}}</p>
      </div>
      <div class="expiry_date">
        <p>{{mission.iscompleted === true?'Completed': (mission.isExpired === true ? 'Expired' : mission.expiry)}}</p>
      </div>
    </div>
  </div>
</body>