2

すべてのオブジェクト (アイデア) を表示する ng-repeat ディレクティブがあります。アイデアの説明 (文字列) が x よりも長い場合、最初の x 文字と「すべて表示」リンクのみを表示したいと考えています。ユーザーがこのリンクをクリックすると、テキスト全体が表示されます。ただし、一度に 1 つのアイデアのみをテキスト全体とともに表示できます。

私は今これを持っています：

div(ng-show = "idea.description.length > maxIdeaDescLength && openLongIdea != idea._id")
  i {{idea.description.substring(0, maxIdeaDescLength) }} ...
  a(href='', ng-click='openLongIdea = idea._id') show all
div(ng-show = "idea.description.length <= maxIdeaDescLength || openLongIdea == idea._id")
  i {{idea.description}}

これは私のコントローラーの一部です：

$scope.openLongIdea = 0;

したがって、[すべて表示] リンクをクリックすると、ideaID が変数 openLongIdea に保存されます。そして、私の ng-show 条件のために、idea-ID が openLongIdea-ID と一致する場合にのみ説明全体を表示することを期待しています。しかし、一度に複数のアイデアが長い説明とともに表示されます。

初めてアイデアが表示されたとき、私のロジックは機能します。すべて表示リンクをクリックすると、長いテキストが表示されます。しかし、openLongIdea の値を新しい Idea-ID で上書きしても、別のアイデアの [すべて表示] リンクをクリックすると、古いアイデアの横に全体が表示されます。

ここで何が問題なのですか？

4

2 に答える 2

1

このためのカスタム フィルター ディレクティブを作成すると、読みやすくなります。他の回答の推奨事項controllerAsは非常に優れています。デモでこの点を見逃しました。

以下のデモまたはこのフィドルをご覧ください。

段落をクリックすると、デモで折りたたみ/展開が可能です。

現在のアイデアが一致しないshow/hide all場合は、ボタンを 2 回クリックする必要がある可能性があります。globalDisplay

「dot.rule」については、このSO questionをご覧ください。

angular.module('demoApp', [])
	.constant('appConst', {
    	maxIdeaDescLength: 50,
    	expandedDefault: false
	})
	.filter('descLimit', descLimitFilter)
	.controller('MainController', MainController);

function descLimitFilter($filter) {
	return function(input, len, expanded, ellipsesChars) {
        var ellipses = ellipsesChars || '...';
    	return expanded? input : $filter('limitTo')(input, len) + ellipses;
    }
}

function MainController($scope, $http, appConst) {
    $scope.maxIdeaDescLength = appConst.maxIdeaDescLength;
    $scope.toggle = toggle;
    $scope.toggleAll = toggleAll;
    
    var globalDisplay = appConst.expandedDefault; // hide all by default;
    
    activate();
    
	function activate() {
        $http.get('https://demo5147591.mockable.io/ideas')
            .then(function(response) {
                $scope.ideas = response.data;
                //console.log(response.data);
            	setExpandedAll($scope.ideas, globalDisplay);
        });
    }
    
    function toggle(item) {
    	item.expanded = !item.expanded;
    }
    
    function toggleAll(items) {
        globalDisplay = !globalDisplay;
    	setExpandedAll(items, globalDisplay);
    }
    
    function setExpandedAll(items, state) {
    	angular.forEach(items, function(item) {
        	item.expanded = state;
        });
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
    <button ng-click="toggleAll(ideas)">show/hide descriptions</button>
    <div>
        <div ng-repeat="idea in ideas">
            <h2>{{idea.title}}</h2>
            <p ng-click="toggle(idea)">{{idea.description | descLimit: maxIdeaDescLength : idea.expanded}}</p>
        </div>
    </div>
</div>

于 2015-10-16T22:10:45.087 に答える