Question

我有一个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;

因此，当我点击show all链接时，ideaID将被保存到变量openLongIdea中。并且由于我的ng-show条件，我希望仅当idea-ID与openLongIdea-ID匹配时才显示整个描述。但我仍然看到一次以上长篇描述的不止一个想法。

第一次展示想法时，我的逻辑是有效的。当我点击show all链接时，将显示较长的文本。但是，当我点击查看另一个想法的所有链接时，它也将作为一个整体显示在旧想法旁边，尽管我使用新的Idea-ID覆盖openLongIdea中的值。

这里有什么问题？

Answer 1

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

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

但是，请考虑切换到控制器作为视图语法。来自John Papa's style guide，以及其他论点：

它促进了对视图中“虚线”对象的绑定的使用（例如 customer.name而不是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>

JsFiddle

Answer 2

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

请查看下面的演示或此fiddle。

通过点击段落，可以在演示中进行折叠/扩展。

如果您切换每个想法，如果当前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>

Angular ng-show不会持续检查条件？

2 个答案: