Question

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

Answer 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>看看结果如何。

Answer 2

您可以从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>

Answer 3

您可以通过调用如下函数来实现：

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。

在ng-attr-title错误的情况下添加ng-model值

3 个答案: