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" }
这类数据。整体的结果应该:
一个完整的示例。