Question

我正在使用ng-input-tag并且想要将引导类添加到html的输入元素中以获得其特定的引导类样式，但它没有按预期工作。

以下是代码：

＆＃13;

angular
  .module('myApp', ['ngTagsInput'])
  .controller('myCtrl', function() {

  });

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />

<div ng-app="myApp" ng-controller="myCtrl">
  
  
<div class="form-group">
  <label class="control-label" for="disabledInput">Disabled input</label>
  <tags-input ng-model="tags" class="form-control"></tags-input>
</div>

</div>

＆＃13;

所以我希望你运行代码，发现我无法获得指令的bootstrap表单控件类样式。

以下是Plunker链接：https://plnkr.co/edit/jZlAsJ?p=info

Answer 1

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />

  <script>
    angular
      .module('myApp', ['ngTagsInput'])
      .controller('myCtrl', function() {

      });
  </script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="form-group">
      <label class="control-label" for="disabledInput"> input</label>
      <tags-input ng-model="tags"></tags-input>
    </div>
  </div>
</body>

</html>

Answer 2

看到这个plunker ...我已经为你解决了这个问题（你可能需要修改一下造型）。

https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview

您需要在代码中添加jquery。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Bootstrap js需要运行jquery。请记住，您在bootstrap.js之前添加了jquery（上面的脚本）（仔细观察我的代码，查看续集）。

将类添加到ng输入标记的Input元素

2 个答案: