自定义字符串包括 angular 跨度

Question

我在我的 MVC 视图中有 span 并将数据传递给 span。我想显示

  Test : 5 (3)

我试过如下：

 $scope.getDetails = function (id) {
            localApi.getAlldetails(id)
                .then(function (data) {
                    $scope.importtypes = data;  
                }).catch(function (result) {
                    console.log(result);
                }).finally(function () {

                });
        }
 <tr ng-repeat="importtype in importtypes">
<td>    <span ng-if="importtype.Total != 0">Test :  {{importtype.Total}}  ({{importtype.MatchTotal}}) </span> 
</td></tr>

显示为：Test : 5 谁能帮我做这个.. 提前致谢

Answer 1

试试这个：

<span ng-if="myVal.Total != 0">Test :  {{myVal.Total + "(" + myVal.MatchTotal + ")" }} </span>

Answer 2

我认为你的 myVal.MatchTotal 未定义。

检查它，它正在工作。

   <html lang="en-US">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <body>
       <script type="text/javascript">
        angular.module('app',[]).controller('testCtrl',function($scope){
          $scope.myVal = {
           Total: 5,
           MatchTotal: 3
         }
       })
     </script>
     <div ng-app="app" ng-controller="testCtrl">
      <span ng-if="myVal.Total != 0">Test :  {{myVal.Total}} ({{myVal.MatchTotal}})</span> 
    </div>
  </body>
</html>

Answer 3

首先 - 由于性能原因，请避免在 dom 元素中使用 {{}}。您可以使用 ng-bind-template 指令。

<span ng-if="myVal.Total != 0" ng-bind-template="Test :  {{myVal.Total}}  ({{myVal.MatchTotal}})"> </span>

第二件事是 myVal.MatchTotal 在特定摘要的上下文中为空，这就是为什么你在那里没有价值。您在这里使用 ng-if 语句 - 在加载内容后是否填充 myVal.MatchTotal 值？如果是这样，那么 myVal.MatchTotal 将不会更新，因为 ng-if 创建子范围并且值仅在第一次摘要迭代时包含在 dom 中 - 但 angular 不观察 myVal.MatchTotal变化。如果加载内容后两个值 {{myVal.Total}} ({{myVal.MatchTotal}}) 都将发生变化，则对其应用 $parent。

<span ng-if="myVal.Total != 0" ng-bind-template="Test :  {{$parent.myVal.Total}}  ({{$parent.myVal.MatchTotal}})"> </span>

自定义字符串包括 angular 跨度

Custom string include angular span

string

customization

angularjs