how to do a switch or else/if statement in angular js?

Question

I am new to angular js and was playing around with it to try and get my code to return the flag of the country when the user types it in. So far my list filters down when they start typing a country but it wont display the flag. code:

 <h2> Section Two </h2>
<div ng-app="" ng-controller="ModuleTwoController">
    <p><input type="text" ng-model="test"></p>

    <ul>

        <li ng-repeat="x in filtered = (countries | filter:test)">
            {{ x.country }}
        </li>
    </ul>

    <p> Items in list: {{filtered.length}} </p>
    <div ng-switch on="countries">
        <div ng-switch-when="filtered.value === "Argentina">
            <img src="argentina.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="USA">
            <img src="usa.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Brazil">
            <img src="brazil.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Hong Kong">
            <img src="hongkong.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="UK">
            <img src="uk.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Turkey">
            <img src="turkey.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Rwanda">
            <img src="rwanda.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Federated States of Micronesia">
            <img src="fsom.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="India">
            <img src="india.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="South Africa">
            <img src="southafrica.jpg" height="150" width="200">
        </div>

what do i need to add to make it give me the results i want? I also only want the flag to appear when there is one country in the list. so for example if i type in 'u' usa, uk, turkey and south africa are all returned. but then if i type 'us' only the usa is returned. that is the only point i want a flag returned.

Answer 1

Here is your solution code Please Check

HTML

   <h2> Section Two </h2>
<div ng-app="myApp" ng-controller="ModuleTwoController">
    <p><input type="text" ng-model="test"></p>

    <ul>

        <li ng-repeat="x in filtered = (countries | filter:test)">
            {{ x.country }}
        </li>
    </ul>

    <p> Items in list: {{filtered.length}}  </p>
       <div ng-show="filtered.length == 1" >
    <div ng-switch on="filtered[0].country">
        <div ng-switch-when="Argentina">
            <img src="Argentina.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="USA">
            <img src="usa.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Brazil">
            <img src="brazil.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Hong Kong">
            <img src="hongkong.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="UK">
            <img src="uk.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Turkey">
            <img src="turkey.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Rwanda">
            <img src="rwanda.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="Federated States of Micronesia">
            <img src="fsom.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="India">
            <img src="india.jpg" height="150" width="200">
        </div>
        <div ng-switch-when="South Africa">
            <img src="southafrica.jpg" height="150" width="200">
        </div>
                <div ng-switch-default>
            Nothing
            </div>
        </div>

         </div>

            </div>

JsCode

var app = angular.module('myApp', []);

function ModuleTwoController($scope) {
   $scope.countries = [{country:'Argentina'},
                        {country:'USA'},
                        {country:'Brazil'},
                        {country:'Hong Kong'},
                        {country:'UK'},
                        {country:'Turkey'},
                        {country:'Rwanda'},
                        {country:'Federated States of Micronesia'},
                        {country:'India'},
                        {country:'South Africa'}
                ];
        }

and here is the working example JsFiddle