当我在 Angularjs 中绑定来自响应的数据时，引导多选不起作用
Posted
技术标签:
【中文标题】当我在 Angularjs 中绑定来自响应的数据时，引导多选不起作用【英文标题】：Bootstrap multiselect is not working when i bind the data from response in Angularjs 【发布时间】：2018-10-23 22:29:46 【问题描述】：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 格式相同，但是当我对可用选项的值进行硬编码时，它工作正常。当我从响应中获取值时，它不起作用。任何修复，请帮助我。 TIA。即使我为选择框尝试了多个标签，但我没有得到下拉菜单。它直接显示所有值
【问题讨论】：
你应该在select标签内使用ng-if="data.result1"，这样select会在你得到结果后呈现。
@RajeevRanjan 也尝试过，但没有奏效。它一次性加载所有值。我没有得到任何下拉菜单和复选框
你可以试试ng-if="data.model"
@RajeevRanjan 我发布了一个虚拟回复，你能解决这个问题吗，所以我可以得到一个下拉列表作为上面的选择。是的，我试过 data.model 没用
【参考方案1】：
我找到了使用语义 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>【讨论】：
以上是关于当我在 Angularjs 中绑定来自响应的数据时，引导多选不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥当我在 ios 应用程序中使用 alamofire 时来自服务器的字符串响应会发生变化？