2

我有一个 ng-repeat 指令，我在其中显示所有对象（想法）。如果一个想法描述（字符串）比 x 长，我只想显示前 x 个字符和一个“全部显示”链接。用户可以点击此链接，将显示整个文本。但是一次只能显示一个想法及其整个文本。

我现在有这个：

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 匹配时显示整个描述。但我仍然一次看到不止一个想法，它们的描述很长。

第一次展示这些想法时，我的逻辑是有效的。当我单击显示所有链接时，将显示较长的文本。但是当我点击另一个想法的查看全部链接时，它也会整体显示在旧想法旁边，尽管我用新的想法ID覆盖了openLongIdea中的值。

这里有什么问题？

4

2 回答 2

3

如评论中所述，它看起来像是绑定到原语的问题。在 JavaScript 中，原语（布尔值、数字、字符串）是不可变的，因此当您更改一个，例如您的 numbermaxIdeaDescLength时，前一个实例将被丢弃并使用一个新实例。这打破了 Angular 的双向绑定，并且任何其他用法maxIdeaDescLength都不会使用新值更新。

您可以通过在egopenLongIdea上的对象上创建属性来解决此问题。在这种情况下，即使发生更改，也会引用，因此可以访问更新后的值。$scope$scope.data.openLongIdea$scopedatamaxIdeaDescLengthmaxIdeaDescLength

但是，请考虑切换到 controllerAs View Syntax。来自John Papa 的风格指南，以及其他论点：

它提倡使用绑定到视图中的“点”对象（例如，customer.name 而不是名称），这更符合上下文，更易于阅读，并且避免了在没有“点”的情况下可能出现的任何引用问题。

更新的控制器：

var app = angular.module("app", []);
app.controller('ctrl', function () {
  var vm = this;
  vm.maxIdeaDescLength = 10;
  vm.ideas = [
    {_id : 0, description :'abcd efgh ijkl'},
    {_id : 1, description :'qwer tyui opzx'}
  ];
});

示例视图：

<div ng-app="app" ng-controller="ctrl as vm">
  <div ng-repeat="idea in vm.ideas">
    <div ng-show = "idea.description.length > vm.maxIdeaDescLength && vm.openLongIdea !== idea._id">
      {{idea.description.substring(0, vm.maxIdeaDescLength) }} 
      <a href='' ng-click='vm.openLongIdea = idea._id'> show all </a>
    </div>
    <div ng-show = "idea.description.length <= vm.maxIdeaDescLength || vm.openLongIdea === idea._id">
      {{idea.description}}
    </div>
  </div>
</div>

提琴手

于 2015-10-16T21:09:34.280 回答
1

我会为此创建一个自定义过滤器指令，因为它更具可读性。另一个答案中的建议controllerAs非常好，我在演示中错过了这一点。

请看下面的演示或在这个小提琴中。

通过单击段落，可以在演示中折叠/展开。

如果您切换每个想法，则可以在某一时刻改进该指令，show/hide all如果当前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 回答