如何在 Angular JS 中执行开关或 else/if 语句

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

本文关键字：else if 语句 开关 执行 Angular JS      更新时间：2023-09-26

我是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"，则美国，英国，土耳其和南非都将返回。但是，如果我输入"我们"，则只返回美国。这是我想要返回标志的唯一一点。

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

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

这是工作示例小提琴

相关文章：