我有一个AngularJS ng-option集合，以及一个带有一些＆＃34; Champion＆＃34;的SQL Server数据库。名。
我使用DB中的这个列表填充我的ng-option，但是我遇到了一些问题。现在我使用以下ng-option来设置我的列表。
<span>
<select style="width:25%" ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1" ng-change="part3Valid()">{{champ1.cName}}</select>
</span>
这里的问题是我认为＆＃34;由于我的主键列表已损坏/有间隙，因此会导致显示正确选项名称的正确图像时出现问题。
按图片，我的意思是我的选项（在更改时）更新图像如下。
Favorite Champions
<!--SET UP LE CHAMPS-->
<div>
<span><img ng-src="/Content/champions/{{Champions1[champ1].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
<span><img ng-src="/Content/champions/{{Champions2[champ2].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
<span><img ng-src="/Content/champions/{{Champions3[champ3].cName.trim() || 'None'}}_Square_0.png" style="width:15%" /></span>
</div>
<div>
<span><select style="width:25%" ng-options="champ1.cID as champ1.cName for champ1 in Champions1 | orderBy: 'cName'" ng-init="0" ng-model="champ1" ng-change="part3Valid()">{{champ1.cName}}</select></span>
<span><select style="width:25%" ng-options="champ2.cID as champ2.cName for champ2 in Champions2 | orderBy: 'cName'" ng-init="0" ng-model="champ2" ng-change="part3Valid()">{{champ2.cName}}</select></span>
<span><select style="width:25%" ng-options="champ3.cID as champ3.cName for champ3 in Champions3 | orderBy: 'cName'" ng-init="0" ng-model="champ3" ng-change="part3Valid()">{{champ3.cName}}</select></span>
</div>
因此，我的选项中的实际名称列表是CORRECT和IN ORDER，但图像不对齐，例如显示的第一个选项是＆＃34; Aaatrox＆＃34;，但它显示的图像为＆ ＃34;阿卡里＆＃34 ;.因此，为什么我在更新图像时会想到Champions1[champ1].cName.trim()），我认为ng-src设置与ng-option设置有不同的排序/结构化列表，但是我我不确定如何解决这个问题，或者错误对齐的来源。
这是我的API调用和工厂（为了便于阅读而粘在一起）。
[HttpGet]
public HttpResponseMessage GET()
{
using (MoviesEntities db = new MoviesEntities())
{
var query = from champs in db.championLists
select new
{
cID = champs.ID,
cName = champs.Name,
};
HttpResponseMessage msg = new HttpResponseMessage();
msg.Content = new ObjectContent<object>(query.OrderBy(x => x.cName).ToList(), new System.Net.Http.Formatting.JsonMediaTypeFormatter());
msg.StatusCode = HttpStatusCode.OK;
return msg;
}
}
---------------------------------------
app.factory('championService', function ($http) {
var championService = {};
championService.getResources = function () {
return $http({
url: '/API/APIChampions',
method: "GET"
})
}
return championService;
});
我将服务设置为champ1 / 2/3。
这是我的数据库列表，因为你可以看到我的PKID有一些差距所以我认为当我把它调用到我的应用程序时可能会出现问题？ （还注意在列表末尾添加新名称，即使我重新订购）
1 None 2 Aatrox 3 Ahri 4 Akali 5 Alistar 6 Amumu 7 Anivia 8 Annie 9 Ashe 10 Blitzcrank 11 Brand 12 Braum 13 Caitlyn 14 Cassiopeia 15 Chogath 16 Corki 17 Darius 18 Diana 19 Draven 20 DrMundo 21 Elise 22 Evelynn 23 Ezreal 25 Fiora 26 Fizz 27 Galio 28 Gangplank 29 Garen 30 Gragas 31 Graves 32 Hecarim 33 Heimerdinger 34 Irelia 35 Janna 36 JarvanIV 37 Jax 38 Jayce 39 Jinx 40 Karthus 41 Katarina 42 Kayle 43 Kennen 45 Leblanc 46 LeeSin 47 Leona 48 Lissandra 49 Lucian 50 Lulu 51 Lux 52 Malphite 53 Malzahar 54 Maokai 55 MasterYi 56 MissFortune 57 Mordekaiser 58 Morgana 59 Nami 60 Nasus 61 Nautilus 62 Nidalee 63 Nocturne 64 Nunu 65 Olaf 66 Orianna 67 Pantheon 68 Poppy 69 Quinn 70 Rammus 71 Renekton 72 Rengar 73 Riven 74 Rumble 75 Ryze 76 Sejuani 77 Shaco 78 Shen 79 Shyvana 80 Singed 81 Sion 82 Sivir 83 Skarner 84 Sona 85 Soraka 86 Swain 87 Syndra 88 Talon 89 Taric 90 Teemo 91 Thresh 92 Tristana 93 Trundle 94 Tryndamere 95 TwistedFate 96 Twitch 97 Udyr 98 Urgot 99 Varus 100 Vayne 101 Veigar 102 Vi 103 Viktor 104 Vladimir 105 Volibear 106 Warwick 108 Xerath 109 XinZhao 110 Yasuo 111 Yorick 112 Zac 113 Zed 114 Ziggs 115 Zilean 116 Zyra 117 Karma 118 Khazix 119 Velkoz 120 Gnar 123 Kalista 124 RekSai 126 KogMaw 128 Wukong 1122 FiddleSticks
对API调用和AngularJS来说还是比较新，所以我正在努力解决这个问题。
答案 0 :(得分：1)
执行此操作时：Champions1[champ1].cName.trim()您正在访问champions数组中的某个位置，该位置不一定与您传递的ID相同。
但你可以使用这样的ng-options：
ng-options="champ1.cName for champ1 in Champions1 | orderBy: 'cName'"
然后：
<img ng-src="/Content/champions/{{champ1.cName.trim() || 'None'}}_Square_0.png" style="width:15%" />
或者，如果您只需要名称：
ng-options="champ1.cName as champ1.cName for champ1 in Champions1 | orderBy: 'cName'"
然后：
<img ng-src="/Content/champions/{{champ1.trim() || 'None'}}_Square_0.png" style="width:15%"/>