javascript - ng-options生成无法设置默认选项
本文介绍了javascript - ng-options生成无法设置默认选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.我创建了一个json文件
2、使用$http服务请求并获得了返回数据
3、使用ng-options来生成select的时候我设置了默认选中项
可是别的功能都成功了，唯独默认选中项设置失败，无论如何都没办法生成。请问这如何解决？
这是我的前端代码：
前端菜鸟，请大神赐教，感激不尽
<!DOCTYPE html>
<html lang="en" ng-app="ag">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-controller="agCtrl1">
<select name="" id="" ng-model="obj" ng-options="item.Name for item in selects" ng-init="obj=selects[0]"></select>
<p>您选择的是：<span ng-bind="obj.Name"></span></p>
<p>他的地址是：<span ng-bind="obj.Url"></span></p>
<p>他的国度是：<span ng-bind="obj.Country"></span></p>
</div>
</body>
</html>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('ag',[]);
app.controller('agCtrl1',function($scope,$http){
$http({
method:'get',
url:'1.json'
}).then(function(res){
$scope.selects=res.data.sites;
});
});
</script>
解决方案
这个问题是考验基础问题了。
首先 ng-init 前面的回答都说指出来了，是在compile的时候调用，而此时 selects 还未从远程获取到值，所以自然 obj 是空的。
其次，选中状态为空，是由此时的 $scope.obj 还是空的，已知对应的 ng-options 中找不到相对应的，所以就空了，这里的 $scope.obj 取决于 for item，所以赋值给 obj，也应该是 { "Name": "菜鸟教程1", "Url": "www.runoob.com", "Country": "CN" } 这类数据。
整体的结果应该：
<select ng-model="obj" ng-options="item.Name for item in selects"></select>
$scope.selects = res.data.sites;
$scope.obj = $scope.selects[0];这篇关于javascript - ng-options生成无法设置默认选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
