爲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，仍然沒有爲我工作。我只想要bootstrap的風格而不是bootstrap的jquery，因此沒有添加。這會影響任何代碼嗎？ –

<!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，它的工作。但我使用bootstrap完成application.I確實需要引導3我的網頁樣式。現在我不能刪除bootstrap了。o.O –

嗨，Naren。我已經更新了我的答案，包括bootstrap 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輸入標籤的輸入元素添加類

回答

相關問題