在ng-attr-title的错误条件下添加模型值

问题描述 投票:2回答:3

如果mainCtrl.header.Version中的条件为false,如何在字符串文本中添加ng-attr-title

HTML

<label class="form-control" ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval {{mainCtrl.header.Version}} times'}}">{{mainCtrl.header.Version}}</label>
angularjs
3个回答
1
投票

语法是:

ng-attr-title="{{mainCtrl.header.Version == 0 ? 'This form has not yet been submitted for approval' : 'This form has been submitted for approval ' + mainCtrl.header.Version + ' times'}}"

ng-attr-title显示给定的字符串,因此您必须使用{{expr}}。为了测试你的表达,我建议你写<pre>{{ your expression | json }}</pre>来看看结果是什么。


0
投票

你可以从JS控制器端实现它。拿一个变量title检查version是否为0然后分配你想要的标题。如果版本大于0,则将版本与标题消息连接起来。请考虑以下代码段。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as mainCtrl">
<label class="form-control" ng-attr-title="{{mainCtrl.title}}">
{{mainCtrl.header.Version}} 
</label>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    var mainCtrl = this;
    mainCtrl.header = {"Version":0};
    if( mainCtrl.header.Version == 0 )
    {
    	mainCtrl.title = "This form has not yet been submitted for approval";
    }
    else
    {
    	mainCtrl.title = "This form has not yet been submitted for " +mainCtrl.header.Version+"  approval";
    }
});
</script>
</body>
</html>

0
投票

你可以通过调用这样的函数来做到这一点:

var app = angular.module('app', []);
app.controller('htmlTitle', ['$scope','$http', function($scope, $http){
  
  $scope.mainCtrl = {
        header: {
        	Version: 0
        }
    };
  
  $scope.get_title = function(){
    if($scope.mainCtrl.header.Version == 0){
      return 'This form has not yet been submitted for approval';
    }
    else{
      return 'This form has been submitted for approval ' +  $scope.mainCtrl.header.Version + ' times';
    }
  }
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="htmlTitle">
    
    <label class="form-control"  title="{{get_title()}}" >{{mainCtrl.header.Version}}</label>
  </div>
</div>

这是一个codepen

© www.soinside.com 2019 - 2024. All rights reserved.