Question

创建我的第一个Ionic应用程序，并且一直运行良好。我不是一个UI人，所以我确定我没有用最好的风格做事，但无论如何......

我有一个包含此代码的模板。（我已经拿出了额外的东西并尝试将其简化为问题的症结所以忽略任何语法错误。）

<ion-content class="padding">
    <div ng-repeat="entry in entries"> 
        <div class="list card item-remove-animate">
            <a class="item item-divider">{{entry.name}}</a>
            <a class="item item-body">
                <b>Type:</b> {{entry.typeCode}}
            </a>  
        </div>
    </div>
</ion-content>

当前显示的entry.typeCode是存储在每个条目中的内容，但我真的想显示代码所引用的类型字符串。我的控制器中有一个函数可以执行从typeCode到typeString的映射，但我不知道如何调用它。

var typeCodeMappings = { 
    "B" : "Bike", 
    "A" : "Auto", 
    "T" : "Train", 
    "P" : "Plane" 
};

app.controller('EntriesCtrl', function($scope, $http) {

    $scope.typeCodeToString = function(code) {
        return typeCodeMappings[code];
    }

    $http.get("...queryUrl...").then(
        function(response) {
            $scope.entries = response.data.results;
        },
        function(reason) {
            console.log("Failed reading entries, reason=" + reason);
        }
    );
    }

查看了所有Ionic用户指南，我要么错过它，要么我错了，错过了范例。我知道我可以在ng-Click =“myFunction（）”等指令中调用绑定到$ scope的JS函数，但是如何在显示内容时这样做呢？我只想从模板中调用typeCodeToString（entry.typeCode）。

请注意，我不仅需要在控制器中调用该函数，还需要传入typeCode以获取在模板中迭代的“条目”。

Answer 1

我不知道你的typeCodeMappings究竟是如何返回字符串的。但是，在控制器本身内定义一个函数可以实现您的要求。因为，您不想在DOM中调用函数，而是在控制器内调用函数。

 app.controller('EntriesCtrl', function($scope, $http) {

       function typeCodeMappings(code){
             var string;
               if(code == "B"){
                  string = "Bike";
                  return string;
                }
              if(code == "A"){
                  string = "Auto";
                  return string;
                }
              if(code == "T"){
                  string = "Train";
                  return string;
                }
               if(code == "P"){
                  string = "Plane";
                  return string;
                }
      }

        $http.get("...queryUrl...").then(
            function(response) {
                $scope.entries = response.data.results;
//i dont know your entries structure but loop the conversion
 angular.forEach($scope.entries, function(value, key) {
               value.typeCode = typeCodeMappings(value.typeCode);});
            },
            function(reason) {
                console.log("Failed reading entries, reason=" + reason);
            }
        );
        }

Answer 2

您可以在$ scope上指定typecodeMappings，如下所示。

 $scope.typeCodeMappings = { 
"B" : "Bike", 
"A" : "Auto", 
"T" : "Train", 
"P" : "Plane"

};

在html视图中，

{{entry.typeCode}} - {{typeCodeMappings [entry.typeCode]}}

希望这有帮助。

从离子模板调用控制器中的javascript函数

2 个答案: