Question

我使用选择的选择，其中我以角度方式从json文件加载数据，如果选择它常见的html 选择，但如果我决定使用所选的选择 ，它只是没有加载，现在我知道它在网页渲染后提取的数据。我为这个问题做了一个指示，但它不起作用。

我的HTML代码：

<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "./css/style.css" />  <script src="jquery.min.js"></script> <script src='chosen.jquery.min.js'></script> <link rel="stylesheet" type="text/css" href="chosen.min.css" /> </head> <body ng-controller="appCtrl">  <select class="control-group" id='sl_edo' style="width:300px;"> <optgroup ng-repeat="pueblo in pueblos | orderBy:'estado'" label={{pueblo.estado}}> <option>{{pueblo.localidad}}</option> </optgroup> </select> <script src="./scripts/json_load.js"></script>  </body> </html>

load_json.js：

var App = angular.module('App', []); App.controller('appCtrl', function($scope, $http) { $http.get('json/pueblos.json') .then(function(res){ $scope.pueblos = res.data; }); }); App.directive('chosen', function($timeout) { var linker = function(scope, element, attr) { scope.$watch('pueblos', function() { $timeout(function() { element.trigger('chosen:updated'); }, 0, false); }, true); $timeout(function() { element.chosen(); }, 0, false); }; return { restrict: 'A', link: linker }; });

关于问题的任何提示/想法？

Answer 1

不确定是否存在问题，但是您正在加载jQuery两次<script src="jquery.min.js"></script>和cdn。删除本地或仅在cdn失败时加载它。

另一点是你没有将chosen指令添加到你的标记中，但这可能只是在问题中缺失。

以下是修改后的脚本标记的代码。同样的演示也在plunkr。

我发现您的代码没有其他问题。

// Code goes here
var App = angular.module('App', []);


App.controller('appCtrl', function($scope, $http) {

  /* // commented here because can't load JSON at SO
    $http.get('pueblos.json')
       .then(function(res){
         console.log(res);
          $scope.pueblos = res.data;                
        });*/
  
  $scope.pueblos = [
  {
    "localidad": "Germany",
    "estado": "new"
  },
  {
    "localidad": "Spain",
    "estado": "old"
  },
  {
    "localidad": "USA",
    "estado": "broken"
  }];

});


App.directive('chosen', function($timeout) {

  var linker = function(scope, element, attr) {

    scope.$watch('pueblos', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);
  $timeout(function() {
      element.chosen();
    }, 0, false);
/*
   $(function () {
    //$timeout(function() {
      //console.log($(element));
      $(element).chosen();
    //}, 0, false);
    //}),
    });*/
  };
  return {
    restrict: 'A',
    link: linker
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    
    <script>window.jQuery || document.write('<script src="jquery.min.js">\x3C/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen-sprite@2x.png"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <div ng-app="App" ng-controller="appCtrl">


  <!--id='sl_edo'-->
  <select class="control-group chosen-select" chosen id='sl_edo'  style="width:300px;">
  
    <optgroup ng-repeat="pueblo in pueblos | orderBy:'estado'" label={{pueblo.estado}}>
      <option>{{pueblo.localidad}}</option>
  
    </optgroup>
  
  </select>
  </div>

Angularjs并选择不合作

1 个答案: