javascript - 如何在 Angular JS 中执行 switch 或 else/if 语句？

Question

我是 Angular js 的新手，正在尝试使用它来尝试让我的代码在用户输入时返回该国家/地区的国旗。到目前为止，当他们开始输入国家/地区时，我的列表会被过滤，但不会显示旗帜。代码:

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

我需要添加什么才能得到我想要的结果？我也只希望当列表中有一个国家/地区时显示国旗。例如，如果我输入“u”，美国、英国、土耳其和南非都会返回。但如果我输入“us”，则仅返回美国。这是我想要返回标志的唯一一点。

Answer 1

这是您的解决方案代码，请检查

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>

Js代码

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'}
                ];
        }

这是工作示例 JsFiddle