javascript 使用 Angularjs 中的单选按钮动态添加 url 和 alt 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19014905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding url and alt attributes dynamically with radio buttons in Angularjs
提问by kevindeleon
So I have a group of radio buttons that are built dynamically using a JSON file. The JSON file contains things like url (of an image), alt text, etc...
所以我有一组使用 JSON 文件动态构建的单选按钮。JSON 文件包含诸如 url（图像）、替代文本等内容...
I have it working pretty well, and can change the value of the img src based on the value of the radio button selected. However, what if I need to access other elements of the json object as well so that I can set the alt text of the image depending on the element selected.
我让它工作得很好，并且可以根据所选单选按钮的值更改 img src 的值。但是，如果我还需要访问 json 对象的其他元素，以便我可以根据所选元素设置图像的替代文本，该怎么办。
Here is a plunkr of the basic functionality as I have it to this point...
这是基本功能的一个plunkr，因为我现在已经有了它......
http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview
http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview
The JSON object looks like so:
JSON 对象如下所示：
{
"header_images" : [
{
"id" : "havoc-header",
"alt" : "Some alt text",
"fname" : "admissions-general-havoc-header.jpg",
"url" : "email-assets/header-images/admissions-general-havoc-header.jpg"
},
{
"id" : "cob-header",
"alt" : "Some more alt text",
"fname" : "cob-banner.jpg",
"url" : "email-assets/header-images/cob-banner.jpg"
},
{
"id" : "css-header",
"alt" : "still some more alt text",
"fname" : "css-banner.jpg",
"url" : "email-assets/header-images/css-banner.jpg"
},
{
"id" : "huns-header",
"alt" : "one more alt-text",
"fname" : "huns-banner.jpg",
"url" : "email-assets/header-images/huns-banner.jpg"
}
]
}
The radio buttons are being built in the view like so:
单选按钮正在视图中构建，如下所示：
<label ng-repeat="header in assets.header_images">
<input type="radio" ng-model="assets.headerimage" value="{{header.url}}" id="{{header.id}}" data-alt="{{header.alt}}" />
{{header.url}}
</label>
And my controller looks like this:
我的控制器看起来像这样：
function MainCtrl($scope, $http) {
$http.get('js/assets.json').then(function(res){
$scope.assets = res.data;
});
}
So basically when a radio button is clicked, I would like to populate this which is outside of the ng-repeat:
所以基本上当一个单选按钮被点击时，我想填充这个在 ng-repeat 之外的：
<img src="{{assets.headerimage}}" alt="{{alt}}" />
The src attribute is easy enough. I have that working fine...As you can see when one of the dynamic radio buttons are checked, the value is added to the assets.headerimage binding. But, how would I set the appropriate alt text?
src 属性很简单。我有这个工作正常......如你所看到的那样，当检查一个动态的单选按钮时，该值将添加到Assets.heDerimage绑定中。但是，我将如何设置适当的替代文字？
I am sure this is really easy, but I can't get my head around it for some reason. I am relatively new to angularjs, so be gentle :D
我相信这真的很容易，但由于某种原因我无法理解。我对 angularjs 比较陌生，所以要温柔：D
采纳答案by zs2020
Add ng-changeevent in the input. Assume the altis in the parentscope, and then you can use $parentto access alt
中添加ng-change事件input。假设alt是在parent作用域内，然后就可以使用$parent访问alt
<input type="radio" ng-model="assets.headerimage" ng-change="$parent.alt = header.alt" ... >
回答by bingjie2680
in your radio ng-model, you are assigning header.urlto the model, so you cant access the alt. but instead if you assign the headerto the model you will be able to access the alt.
在您的收音机中ng-model，您正在分配header.url给模型，因此您无法访问alt. 但是，如果您将 分配header给模型，您将能够访问alt.
<label ng-repeat="header in assets.header_images">
<input type="radio" ng-model="assets.headerimage" value="{{header}}" id="{{header.id}}" data-alt="{{header.alt}}" />
</label>
<img ng-src="{{assets.headerimage.url}}" alt="{{assets.headerimage.alt}}"/>
回答by siergiej
I'll start with a side-note, you should use ng-src(link) for populating source of an image. This way your browser will not hit 404s after request wrong URLs like /{{assets.headerimage}}.
我将从旁注开始，您应该使用ng-src（链接）来填充图像的来源。这样你的浏览器就不会在请求错误的 URL 后点击 404，比如/{{assets.headerimage}}.
Now, regarding your question. Assuming your idis unique, you could re-work your JSON to a form similar to this:
现在，关于你的问题。假设你id是独一无二的，你可以将你的 JSON 重新处理成类似于这样的形式：
{
"header_images" : {
"havoc-header": {
"id" : "havoc-header",
"alt" : "Some alt text",
"fname" : "admissions-general-havoc-header.jpg",
"url" : "email-assets/header-images/admissions-general-havoc-header.jpg"
},
"cob-header": {
"id" : "cob-header",
"alt" : "Some more alt text",
"fname" : "cob-banner.jpg",
"url" : "email-assets/header-images/cob-banner.jpg"
},
"css-header": {
"id" : "css-header",
"alt" : "still some more alt text",
"fname" : "css-banner.jpg",
"url" : "email-assets/header-images/css-banner.jpg"
},
"huns-header": {
"id" : "huns-header",
"alt" : "one more alt-text",
"fname" : "huns-banner.jpg",
"url" : "email-assets/header-images/huns-banner.jpg"
}
}
}
then change value="{{header.url}}"of each of your checkboxes to value="{{header.id}}", and finally populate your image like this:
然后将value="{{header.url}}"您的每个复选框更改为value="{{header.id}}"，最后像这样填充您的图像：
<img ng-src="{{ assets.header_images[assets.headerimage].url }}"/>
Another way does not require modifying the JSON structure, but it still involves using header.idas your model's value. Simply add a function like this to your scope:
另一种方法不需要修改 JSON 结构，但它仍然涉及header.id用作模型的值。只需将这样的函数添加到您的范围：
$scope.getChosenHeader = function() {
for(var i=0;i<$scope.header_images.length;i++) {
var h = $scope.header_images[i];
if(h.id === $scope.assets.headerimage) {
return h;
}
}
}
and then populate your image like this:
然后像这样填充你的图像：
<img ng-src="{{ getChosenHeader().url }}"/>
This way you can access the whole object instead of just urlproperty. Of course remember to only show your <img/>tag if getChosenHeader().urlis not undefined
这样您就可以访问整个对象而不仅仅是url属性。当然记住只显示你的<img/>标签，如果getChosenHeader().url不是未定义的
