Отображение длинного сообщения в желаемом формате с помощью AngularJS
У меня длинная строка сообщения. Каждое родительское сообщение разделяется символом #, а дочернее сообщение - символом ^.
$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>Но этот код не показывает желаемого результата. Мои усилия находятся в здесь.
Ответы 3
Лучше заранее преобразовать строку в объект. Я попытался преобразовать его в объектную форму, чтобы шаблону было легче читать и условно отображать отношения родитель-потомок.
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;
}, {});
});<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>Спасибо! Если вы запустите этот фрагмент кода, вы увидите другой результат. Похоже, ты не проверял. Этот код даже теряет информацию.
Спасибо за ответ, @ 31piy. Это решение тоже хорошо работает. +1 за это.
Я думаю это то что ты ищешь
<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/
Спасибо, Тан Дыонг! Этот ответ теряет информацию, если вы проверите вывод в jsfiddle.
Вы почти сделали это, ознакомьтесь с некоторыми модификациями:
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>Это наиболее убедительное решение. Спасибо @Slava
Привет, MAC. Редакторы обычно используют здесь обрезать болтливый материал, чтобы сообщения было легче читать; см. также здесь. Материал, который может быть истолкован как мольба, также можно удалить, так как это может защитить вопрос от плохого приема. Если вы видите изменения, которые вам не понятны, вы всегда можете проверить связь с редактором - я доступен для сообщений, которые я редактирую через
@halfer.