angularjs 在 ng-repeat 中分隔逗号

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>

the list should separate like this

24 伏交流电
110 伏交流电

Answer 1

这就是您要找的东西？

<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>

Answer 2

在您的 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 3

如果需要分隔选项，则需要使用某种形式的子字符串来切出选项。

因此，例如，这就是我将使用原始 JS 来获得线圈电压的第一个选项。

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

optionOne 的值应该return24 AC。

angularjs 在 ng-repeat 中分隔逗号

angularjs split comma seperate in ng-repeat

javascript

angularjs

angularjs-ng-repeat