0

クラウド ワードの 1 つがクリックされたときにアラート ボックスを起動する d3 ワード クラウドがあります。アラート ボックスを起動する代わりに、対応する div 要素でクリックされた単語の一致するインスタンスを強調表示したいと考えていますel。

ハンドラーは AngularJs ディレクティブ内にあるため、即時クロージャー内に要素のコンテキストがあります。

.on("click",function(v,i,l){
    console.log(
        el // [div.content ng-scope, ...
        v  // Object {text: "demo", ...
    );
    alert(v.text) // demo
})

以前に検索ボックスを作成しているときにこれを行ったことがありますが、コードを失い、どのように行ったかを完全に忘れてしまいました。

4

1 に答える 1

1

または、AngularJS を使用する場合は、フィルターとバインディングを使用できます。

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <span ng-bind-html-unsafe ="word | highlightWord : selectedWord"></span>
        </div>
    </div>
Selected Word: {{selectedWord}}

と：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

});

app.filter('highlightWord', function() {
    return function(word, selectedWord) {
        if(word === selectedWord) {
            return '<strong>' + word + '</strong>';
        } else {
            return word
        }
    };
});

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

フィルターからエスケープされていない html を返すために ng-bind-html-unsafe を使用することに注意してください。ディレクティブを使用してこれを実現することもできます。

編集：

また、テキスト ブロック内の単語を強調表示する場合、アプローチは非常に似ています。

Click: 
    <div style="border: red thin solid; width: 100px; padding: 10px;">
        <div ng-repeat="word in words">
            <a ng-click="$parent.selectedWord = word">{{word}}</a>
        </div>
    </div>
Selected:
    <div style="border: red thin solid; width: 100px; padding: 10px;" ng-bind-html-unsafe ="text | highlightWord : selectedWord"></div>
Selected Word: {{selectedWord}}

と：

app.controller('MainCtrl', function($scope) {
    $scope.words = [
        "beer",
        "wine",
        "whiskey",
        "vodka",
        "gin",
        "rum"
    ];

    $scope.selectedWord = '';

    $scope.text = "blah blah beer blah blah blah wine blah blah blah whiskey blah blah blah vodka blah blah blah blah blah gin blah blah blah blah blah rum blah blah blah blah beer blah blah blah blah vodka blah blah blah vodka blah blah blah blah blah blah vodka blah blah blah blah";

});

app.filter('highlightWord', function() {
    return function(text, selectedWord) {
        if(selectedWord) {
            var pattern = new RegExp(selectedWord, "g");
            return text.replace(pattern, '<span class="highlighted">' + selectedWord + '</span>');
        } else {
            return text
        }
    };
});

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

于 2013-08-14T20:01:35.567 に答える