Question

ng-repeat显示分隔为逗号的逗号

var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.obj = [ { "name": "Operational Current Ie AC-15 at 230V", "displayType": "RadioButton", "options": "10A" }, { "name": "Size", "displayType": "RadioButton", "options": "S00" }, { "name": "Coil Voltage", "displayType": "RadioButton", "options": "24V AC, 110V AC, 230V AC, 24V DC, 110V DC, 220V DC" }, { "name": "Contacts", "displayType": "RadioButton", "options": "4NO, 3NO+1NC, 2NO+2NO" } ];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="value in obj">
<li>{{ value.name }}</li>
<li>{{ value.displayType }} </li>
<li>{{ value.options }}</li><!-- this should be splitted and display one one like this
24v ac
110v ac
230v ac
24v ac
-->
</ul>
	
</div>

列表应该像这样分开

24v ac
110v ac

Answer 1

在JS文件中添加此代码

            $scope.variantAttributeses = [
                {"name": "Operational Current Ie AC-15 at 230V", "displayType": "RadioButton", "options": "10A"},
                {"name": "Size", "displayType": "RadioButton", "options": "S00"},
                {"name": "Coil Voltage", "displayType": "RadioButton", "options": "24V AC, 110V AC, 230V AC, 24V DC, 110V DC, 220V DC"},
                {"name": "Contacts", "displayType": "RadioButton", "options": "4NO, 3NO+1NC, 2NO+2NO"}
            ];

            function split() {
             $scope.newArray = [];
             angular.forEach($scope.variantAttributeses, function (value) {
                value["NewOptions"] = [];
                angular.forEach(value.options.split(","), function (v1) {
                    value["NewOptions"].push(v1);
                });
                $scope.newArray.push(value);
            });
        }
       split();

在HTML文件中添加此代码

<span data-ng-repeat="status in newArray">
    <span data-ng-repeat="optionAry in status.NewOptions">
        <span class="badge" data-ng-bind="optionAry"></span>
    </span>
</span>

输出显示如下

Answer 2

这是你在找什么？

＆＃13;

<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="value in obj">
<li>{{ value.name }}</li>
<li>{{ value.displayType }} </li>
<li>{{ value.options }}</li>
</ul>
	
</div>



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.obj = [ { "name": "Operational Current Ie AC-15 at 230V", "displayType": "RadioButton", "options": "10A" }, { "name": "Size", "displayType": "RadioButton", "options": "S00" }, { "name": "Coil Voltage", "displayType": "RadioButton", "options": "24V AC, 110V AC, 230V AC, 24V DC, 110V DC, 220V DC" }, { "name": "Contacts", "displayType": "RadioButton", "options": "4NO, 3NO+1NC, 2NO+2NO" } ];
    });
</script>

＆＃13;

Answer 3

如果你需要分开选项，那么你需要使用某种形式的子字符串来删除选项。

因此，举例来说，这就是我用raw JS做的第一个线圈电压选项。

const optionOne = variantAttributeses[2].options.substring(0,5):

值optionOne应返回24 AC。

angularjs在ng-repeat中分隔逗号分隔

3 个答案: