Bootstrap multiselect не работает, когда я связываю данные из ответа в Angularjs - PullRequest
Новая
       22

Bootstrap multiselect не работает, когда я связываю данные из ответа в Angularjs

0 голосов
/ 14 мая 2018

Bootstrap multiselect не работает, когда я связываю данные из ответа в Angularjs 

angular.module('ngvalueSelect', [])
 .controller('ExampleController', ['$scope','$http', function($scope,$http) {
   $http.get('https://reqres.in/api/unknown')
  .then(function (result) {
      console.log(result.data);
      $scope.exampleData  = result.data;
      $scope.data = result.data;
  })
   $scope.data = {
    availableOptions: [
         {value: '001', name: 'Hello'},
         {value: '002', name: 'integer'},
       
    ]
   };
   console.log( $scope.data );
}]);



    
    
    

    
    
    
    
    





    
        
            
            
        
        
        model = {{data.model | json}}
ngvalue выберите: {{option.name}} 
model = {{data.model | json}}
jQuery (function () {jQuery ('# multiselect'). Multiselect ();});

Оба JSON имеют один и тот же формат, но когда я жестко кодирую доступные значения, опции работают нормально.Когда я получаю значения из ответа, он не работает.Любые исправления, пожалуйста, помогите мне.ТИА.Даже я попробовал несколько тегов для поля выбора, но я не получаю выпадающий список. Он показывает все значения непосредственно

1 Ответ

0 голосов
/ 15 мая 2018

Я нашел решение, используя semantic-ui. Наконец, все получилось. 

angular.module('ngvalueSelect', [])
 .controller('ExampleController', ['$scope','$http', function($scope,$http) {
   $http.get('https://reqres.in/api/unknown')
  .then(function (result) {
      console.log(result.data);
      $scope.exampleData  = result.data;
      $scope.data = result.data;
  })
}]);
<html>

<head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" >
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script type="text/javascript" src="mj.js"></script>



</head>
<body ng-app="ngvalueSelect">

        <div ng-controller="ExampleController">

        <select name="skills" multiple="" class="ui fluid dropdown">
                <option value="">Skills</option>
               <option ng-repeat="option in data.data" ng-value="option.name">{{option.name}}</option>

              </select>
</body>
<script>
 $('.ui.fluid.dropdown')
 .dropdown({
   maxSelections: 5
 })
;
  
</script>

</html>
...