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>    
阅读 4k
3 个回答

这个问题是考验基础问题了。

首先 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];

一个完整的示例

这样写是没问题的,我觉得应该是你数据还没拿到你的页面就开始渲染了,所以ng-init里selects当时还没拿到数据。

app.controller('agCtrl1',function($scope,$http){
        $http({
            method:'get',
            url:'1.json'
        }).then(function(res){
            $scope.selects=res.data.sites;
            $scope.obj = $scope.selects[0];
        });
    });
    
    

在拿到数据后自己主动给obj赋值 就可以拿到默认值了。

ng-init="obj=selects[0]"

ng-init在$scope.selects还没有获取到数据的时候就运行了,所以应该在$scope.selects=res.data.sites;后面添加$scope.obj = $scope.selects[0];

ng-init只用在一些初始化定义上


另外一个问题obj的作用域问题
使用下面的写法

$scope.model={
    obj:'',
    selects=[]
  }
ng-model="model.obj"
ng-repeat="item in model.selects"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题