我是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”，则仅返回美国。这是我想要返回标志的唯一点。
这是您的解决方案代码，请检查
的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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句