ng入力タグの入力要素にクラスを追加する

ng-input-tagで遊んでいて、特定のブートストラップクラススタイルを得るためにhtmlの入力要素にブートストラップクラスを追加したいと思っています。以下は

コードです：だから私はあなたがコードを実行したと私は指示のためのブートストラップフォームコントロールクラスのスタイルを取得することができませんことを発見願っていng入力タグの入力要素にクラスを追加する

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

 
    });

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

。ここで

がPlunkerリンクです：https://plnkr.co/edit/jZlAsJ?p=info

出典

2016-11-27 Naren gs

@Samsull Arefeenはbootstrap.min.jsを追加しようとしましたが、それでも私のためには機能しませんでした。私はブートストラップのスタイルだけを望んでいました。それがコードに影響しますか？ –

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

出典

2016-11-27 11:01:58 jtsnr

こんにちは@jtsnr、それは働いた。しかし、私は完全なアプリケーションのためのブートストラップを使用しています。私は私のページのためのブートストラップ3スタイルが必要です。今、私はブートストラップを外すことができません.. o.O –

こんにちはナーレン。私は、ブートストラップCSSを含め、またタグ入力からフォームコントロールクラスを削除することで、私の答えを更新しました。これは問題なく動作するようです。それが役に立てば幸い – jtsnr

-1

このplunkerを参照してください...私は（あなたがスタイリングを少し変更する必要があります）あなたのためにこれを解決してきました。

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

コードにjqueryを追加する必要があります。

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

ブートストラップjsを実行するにはjqueryが必要です。 bootstrap.jsの前にjquery（上記のスクリプト）を追加したことに注意してください（私のコードを注意深く見て、続編を見てください）。

出典

2016-11-28 10:03:18

ng入力タグの入力要素にクラスを追加する

答えて

関連する問題