Question

我有一个场景，一旦用户从模态窗口中选择多个所有者，我在屏幕上显示所有选定的所有者;分隔符，所以我的问题是我可以为这些项目中的每一个添加一些背景颜色使用分隔符，以便用户可以看到名称的差异。

HTML

<input type="text" class="form-control mousedwncall"
        id="cntrlOwner" required ng-model="controlDTO.cntrlOwner"
        name="cntrlOwner"
        ng-click="opencntrlOwner()"
        placeholder="Control Owner" />

ctrl.js

 $scope.selectedControlOwner = function() {
       $scope.ctrlOwnerModal.close();
       $scope.createControlFormName.$dirty=true;
       $scope.controlDTO.controlOwnerWorkerKey = $scope.selectedOwners.map(function (owner) { return owner.workerKey; });
       $scope.controlDTO.cntrlOwner = $scope.selectedOwners.map(function (owner) { return owner.fullName; }).join(';');
     };

Answer 1

我认为你要找的是select2。当您选择多个值时，它会将它们显示为看似文本输入的可关闭项目列表。举个例子，去here并按'设置加州和阿拉巴马'

Answer 2

您可以只存储列表，而不是存储连接的名称列表。然后在您的模板中，您可以ng-repeat覆盖此列表，并将每个名称存储在<span>（或其他一些元素）中，然后您可以设置样式：

$scope.controlDTO.cntrlOwners = $scope.selectedOwners.map(function (owner) { return owner.fullName; });

然后在你的标记中：

<div>
  <span class="owner" ng-repeat="owner in controlDTO.ctrlOwners">{{owner}}</span>
</div>

我们如何设置数组连接中的字符串样式？

2 个答案: