Question

我有一段代码在Angular 1.2中运行良好而不包括Bootstrap，但是当我使用selectpicker类Bootstrap时，数据绑定没有发生。下面是演示代码。

<html ng-app>
<head>
    <script src="assets/js/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/bootstrap-select.js"></script>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-select.css" rel="stylesheet" />
    <link href="assets/css/main.css" rel="stylesheet" />
    <link href="assets/css/styles.css" rel="stylesheet" />
</head>
 <body>
  <div ng-controller='Contact'>
    <select class="selectpicker" ng-model='selected_person' ng-options='person.name for person in people'>
    <option value="">Choose option</option>
   </select>
   <br>
      Selected name = {{selected_person.name}}
   </div>
   <br>


   <script>
    $('.selectpicker').selectpicker();

   function Contact($scope){
       $scope.people = [
           {name:"Abc",number: 65},
           {name:"Xyz",number: 75},
           {name:"Pqr",number: 85}
       ];
   }
   </script>
  </body>
</html>

Answer 1

enter image description here 您不希望在文件中有一些jQuery，而在另一个文件中有一些AngularJS，通常。如果jQuery创建元素等，它们可能不会被角度拾取。

正确的解决方案是使用Angular指令。在这里，看起来有人为你做了一个。

angular-bootstrap-select

这就是我得到的，在stackoverflow中提出的问题与我为您复制的答案相同，请参阅此处docs download here

应用Bootstrap主题时无法绑定Angular选择

1 个答案: