Question

我正在制作一个带有ng-repeat的框，这里是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>

这是

中控制器中定义的数组

$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}
]

我已经创建了过滤器

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

在上面的代码中，您可以看到html中带有类.expiry_date的最后一个div我已经定义了过滤器。

如果{{mission.expiry}}的状态为真，我想要更改{{mission.iscomplete}}的文字。

感谢任何帮助。谢谢。

Answer 1

如果您想通过filter实现此目的，请尝试此操作。从filter您需要返回任何内容。

.filter('missionexpire', function(){
    return function(input, iscompleted){
        if(iscompleted){
            return 'Completed';
        } else {
            return input;
        }
    }
})

和

<div class="expiry_date">
        <p>{{mission.expiry | missionexpire:misson.iscompleted}}</p>
    </div>

＆＃13;

var app = angular.module('myApp', []);

app.controller('MyCtrl',['$scope', 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':false,'iscompleted':true}
]
}])




app.filter('missionexpire', function(){
    return function(input, isCompleted){
        if(isCompleted){
            return 'Completed';
        } else {
            return input;
        }
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp' ng-controller='MyCtrl'>
  <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.expiry | missionexpire:mission.iscompleted}}</p>
    </div>
</div>
  </div>

＆＃13;

Answer 2

您可以在没有filter的情况下实现此目的。只需使用像

这样的条件表达式

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

要根据content中的特定属性值过滤AngularJs，请使用Pipes（|）所以，在你的部分：

    <div class="expiry_date">
        <p>{{mission.expiry | missionexpire}}</p>
    </div>

您只添加属性，但不添加该属性的评估。为此，您需要将其更改为，

    <div class="expiry_date">
        <p>{{mission.expiry | missionexpire:iscomplete}}</p>
    </div>

Angularjs根据真实的错误状态更改文本

3 个答案: