Question

我是角度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>

我需要添加什么才能让我得到我想要的结果？我也只想在列表中有一个国家时出现该标志。所以，例如，如果我输入'你'美国，英国，土耳其和南非都返回。但是如果我键入'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>

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

这是工作示例 JsFiddle

如何在角度js中执行切换或else / if语句？

1 个答案: