当我从Angularjs中的响应绑定数据时，Bootstrap multiselect不起作用 [英] Bootstrap multiselect is not working when i bind the data from response in Angularjs
本文介绍了当我从Angularjs中的响应绑定数据时，Bootstrap multiselect不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我从Angularjs中的响应绑定数据时，Bootstrap multiselect不起作用
Bootstrap multiselect is not working when i bind the data from response in 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 );
}]);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"
type="text/css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.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">
<form name="myForm">
<label for="ngvalueselect"> ngvalue select: </label>
<select size="6" name="ngvalueselect" ng-model="data.model" id="multiselect" multiple="multiple">
<option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.value}}-{{option.name}}</option>
</select>
</form>
<hr>
<pre>model = {{data.model | json}}</pre>
<br/>
<form name="myForm">
<label for="ngvalueselect"> ngvalue select: </label>
<select size="6" name="ngvalueselect" ng-model="data.model" id="multiselect" multiple="multiple">
<option ng-repeat="option in data.data" ng-value="option.name">{{option.name}}</option>
</select>
</form>
<hr>
<pre>model = {{data.model | json}}</pre>
<br/>
</div>
</body>
<script>
jQuery(function () {
jQuery('#multiselect').multiselect();
});
</script>
</html>
两个JSON都具有相同的格式，但是当我硬编码值availableOptions时它工作正常。当我从响应中获取值时，它不起作用。任何修复，请帮助我。 TIA。即使我为选择框尝试了多个标签，但我没有得到dropdown.It直接显示所有值
Both the JSON are of the same format, but when i hard code the values availableOptions it's working fine. When i get the values from the response it's not working. Any fixes, please help me. TIA. Even i tried multiple tag for select box but i'm not getting dropdown.It's showing all values directly
推荐答案
我找到了使用语义ui的解决方案。最后，它成功了。
I have found the solution using semantic-ui. Finally, It worked out.
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>
这篇关于当我从Angularjs中的响应绑定数据时，Bootstrap multiselect不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
