gpt4 book ai didi

mysql - 链接到有间隙的主键时,AngularJS ng-options 问题

转载 作者:行者123 更新时间:2023-11-29 12:30:29 32 4
gpt4 key购买 nike

我有一个 AngularJS ng-option 集,以及一个带有一些“Champion”名称的 SQL Server 数据库。

我使用数据库中的此列表填充我的 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>

这里的问题是,我“认为”由于我的主键列表已损坏/有间隙,它会导致使用正确的选项名称显示正确的图像时出现问题。

通过图像,我的意思是我的选项(更改时)更新图像如下。

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>

因此,我的选项中的实际名称列表是正确且按顺序的,但图像未对齐,例如显示的第一个选项是“Aaatrox”,但它显示的是“Akali”的图像。因此,为什么我认为当我更新图像(Champions1[cham​​p1].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 来说还是较新的,所以我正在努力解决这个问题。

最佳答案

当您执行此操作时:Champions1[cham​​p1].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%"/>

关于mysql - 链接到有间隙的主键时,AngularJS ng-options 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27621766/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com