4

したがって、JSON ファイルを使用して動的に構築されるラジオ ボタンのグループがあります。JSON ファイルには、(画像の) URL、代替テキストなどが含まれます。

私はそれをかなりうまく機能させており、選択したラジオボタンの値に基づいて img src の値を変更できます。ただし、選択した要素に応じて画像の代替テキストを設定できるように、json オブジェクトの他の要素にもアクセスする必要がある場合はどうでしょうか。

ここまでの基本的な機能の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 属性は簡単です。正常に動作しています...動的ラジオ ボタンの 1 つがオンになっているとわかるように、値が assets.headerimage バインディングに追加されます。しかし、適切な代替テキストを設定するにはどうすればよいでしょうか?

これは本当に簡単だと確信していますが、何らかの理由で頭を悩ませることができません。私はangularjsに比較的慣れていないので、優しくしてください:D

4

3 に答える 3

4

radiong-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 をリクエストした後に 404 をヒットしなくなります/{{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 に答える