Question

我有很长的消息字符串。每个父消息由符号#分隔，子消息由符号^分隔。

$scope.messages = "Message1#Message2#Message3#Message4^Message41^Message42#Message5^Message51^Message52^Message53^Message54^Message55";

我想以下面的无序列表格式显示这些消息。

我使用ng-repeat和ul-li来显示消息，但子消息未正确对齐为嵌套的ul-li元素，并且还显示重复的消息。

<ul>
    <li ng-repeat="message in messages.split('#')">
        {{message}}
        <ul>
            <li ng-repeat="msg in message.split('^')">
                {{msg}}
            </li>
        </ul>
    </li>
</ul>

但是这段代码没有显示所需的输出。我的努力位于here。

Answer 1

最好事先将字符串转换为对象。我试图将其转换为对象形式，以便模板更容易阅读并有条件地显示父子关系。

＆＃13;

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.messages = "Message1#Message2#Message3#Message4^Message41^Message42#Message5^Message51^Message52^Message53^Message54^Message55";

    $scope.messages = $scope.messages
      .split("#").reduce((acc, item) => {
        if (item.includes('^')) {
          let c = item.split('^');
          acc[c[0]] = c.slice(1, -1);
        } else {
          acc[item] = null;
        }

        return acc;
      }, {});
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="(key, value) in messages">
      {{key}}
      
      <ul ng-if="value">
        <li ng-repeat="child in value track by $index">
          {{child}}
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

我认为这就是你在寻找什么

<li ng-repeat="message in messages">
            {{message.text}}
                <ul>
                  <li ng-if="message.sub" ng-repeat="msg in message.sub">
                    {{msg}}

                  </li>
                </ul>
          </li>

$scope.myFilter = function(input){
            if(typeof input == 'string'){
                var result = [];
                var items = input.split('#');
                for(var i=0;i<items.length;i++){
                    var item = items[i];
                    if(item.indexOf('^') == -1){//item doesn't have '^' means parent message
                        result.push({text:item});
                    }else{
                        //here my logic goes wrong to split child messages
                        var subItems = item.split('^');
                        //now If I push this subItems directly into result, not a good idea

                        result.push({sub: subItems.splice(1, subItems.length), text: subItems[0]});
                    }
                }
                return result;
            }
            return [];
};

https://jsfiddle.net/va94nqvd/12/

Answer 3

你几乎完成了它，检查了一些修改：

angular.module('app', []).controller('MyCtrl', function($scope) {
  $scope.messages = "Message1#Message2#Message3#Message4^Message41^Message42#Message5^Message51^Message52^Message53^Message54^Message55";
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<ul ng-app='app' ng-controller="MyCtrl">
  <li ng-repeat="message in messages.split('#')">    
    {{message.split('^')[0]}}
    <ul>
      <li ng-repeat="msg in message.split('^').splice(1)">
        {{msg}}
      </li>
    </ul>
  </li>
</ul>

使用AngularJS以所需格式显示长消息

3 个答案: