4

所以我有一组使用 JSON 文件动态构建的单选按钮。JSON 文件包含 url（图像的）、替代文本等内容。

我让它工作得很好，并且可以根据所选单选按钮的值更改 img src 的值。但是，如果我还需要访问 json 对象的其他元素，以便我可以根据所选元素设置图像的 alt 文本，该怎么办。

这是我到目前为止所拥有的基本功能的一个plunkr...

http://plnkr.co/edit/bI4ggTNCPSq3o1Bt6gqg?p=preview

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"
        }
    ]
}

单选按钮正在视图中构建，如下所示：

<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>

我的控制器看起来像这样：

function MainCtrl($scope, $http) {
    $http.get('js/assets.json').then(function(res){
        $scope.assets = res.data;
    });
}

因此，基本上当单击单选按钮时，我想填充 ng-repeat 之外的内容：

 <img src="{{assets.headerimage}}" alt="{{alt}}" />

src 属性很简单。我的工作正常...如您所见，当检查一个动态无线电按钮时，该值将添加到资产中。但是，我将如何设置适当的替代文本？

我确信这真的很容易，但由于某种原因我无法理解它。我对 angularjs 比较陌生，所以要温柔：D

4

3 回答 3

4

在您的收音机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}}"/>
于 2013-09-25T20:54:31.610 回答
3

在. ng-change_ input假设alt是在parent范围内，然后你可以使用$parent来访问alt

<input type="radio" ng-model="assets.headerimage" ng-change="$parent.alt = header.alt" ... >
于 2013-09-25T21:11:04.567 回答
1

我将从旁注开始，您应该使用ng-src( link ) 来填充图像的源。这样，您的浏览器在请求错误的 URL（如/{{assets.headerimage}}.

现在，关于你的问题。假设您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"
        }
    }
}

然后将value="{{header.url}}"每个复选框更改为value="{{header.id}}"，最后像这样填充您的图像：

<img ng-src="{{ assets.header_images[assets.headerimage].url }}"/>

另一种方法不需要修改 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;
        }
    }
}

然后像这样填充您的图像：

<img ng-src="{{ getChosenHeader().url }}"/>

这样您就可以访问整个对象而不仅仅是url属性。当然记得只显示你的<img/>标签，如果getChosenHeader().url不是未定义的

于 2013-09-25T21:11:38.387 回答