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

Question

Creating my first Ionic app and has been going well up to now. Am not a UI guy so I'm sure I'm not doing things using the best style, but anyway...

I have a template that has this code in it. (I have taken out extra stuff and tried to simplify it to the crux of the problem so ignore any syntax errors.)

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

The entry.typeCode that is currently being displayed is what is stored in each entry, but I really want to display the type string that the code refers to. There is a function in my controller that does a mapping from typeCode to typeString but I don't know how to call it.

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

Have looked all over the Ionic user guide and I am either missing it or I am just doing it wrong and missing the paradigm. I know I can call JS functions bound to $scope in directives like ng-Click="myFunction()" etc, but how do I do it just when displaying something? I just want to call typeCodeToString(entry.typeCode) from the template.

Note that I not only need to call the function in the controller but also pass in the typeCode for the "entry" that is being iterated over in the template.

Answer 1

I don't know how exactly your typeCodeMappings returns string. However, defining a function within the controller itself can achieve what you are asking for. Since, you don't want to call function from the DOM rather within the controller.

 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

You can specify your typecodeMappings on $scope such as below.

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

};

And in html view,

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

Hope this helps.