Fatal编程技术网

用angularjs填充select

angularjs

用angularjs填充select,angularjs,Angularjs,当我用angularjs填充select时，有两个小问题 我使用api rest的结果填充我的select（我使用mocky） My index.html： <!DOCTYPE html> <html ng-app="test"> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> <script src="a

当我用angularjs填充select时，有两个小问题

我使用api rest的结果填充我的select（我使用mocky）

My index.html：

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <title>My first app</title>
</head>
<body>
<h1>My first app</h1> 
<div ng-controller="DemoCtrl">
<select ng-model="selectedTestAccount" 
    ng-options="item.id as item.name for item in testAccounts">
<option value="">Select Account</option>
</select>
{{error}}
</div>
</body>
</html>
API:

返回：

{"id" : 1, "name" : "France - Mainland", "desc": "some description"}
现在我有两个问题：

  • 与上面的示例类似，选择部分渲染为精细。如果打开“选择”，我可以看到：

    • 正如你所看到的，第一个字段是正确的，但另一个字段是未定义的，我不知道为什么

  • 第二个问题是，如果我有一个来自API的对象列表，例如更改调用的url，它返回：

    {"id" : 1, "name" : "France - Mainland", "desc": "some description"}
    [{“id”：1，“名称”：“法国-大陆”，“描述”：“一些描述”}， {“id”：2，“name”：“Italy”，“desc”：“some description”}]

    • 我有所有选项字段，如未定义（见下图）

    怎么了

    谢谢

    问题在于api只返回一个数据，这是一个对象。您需要将响应推送到testAccounts数组，如下所示

      $http({
    method: 'GET',
    url: 'https://www.mocky.io/v2/5a2112be2d0000040ee000aa'
  }).then(function(result) {
    $scope.testAccounts.push(result.data);
    console.log($scope.testAccounts);
  }).catch(function(err) {
    $scope.error = err
  });

    问题在于api只返回一个数据，这是一个对象。您需要将响应推送到testAccounts数组，如下所示

      $http({
    method: 'GET',
    url: 'https://www.mocky.io/v2/5a2112be2d0000040ee000aa'
  }).then(function(result) {
    $scope.testAccounts.push(result.data);
    console.log($scope.testAccounts);
  }).catch(function(err) {
    $scope.error = err
  });


    
选择帐户
    ng如果只定义了值，则if将允许

    
选择帐户
    ng如果只定义了值，if将允许

    谢谢，但我知道为什么会有一些未定义的字段，api是否返回一个对象而没有一个未定义的hanks，但我知道为什么会有一些未定义的字段，api是否返回一个对象而没有未定义的对象这只适用于url：如果您尝试使用此方法，则不起作用（第二个api返回一个列表）@Gjord83，正如我上面解释的那样，第二个链接返回数组，因此您需要直接分配。检查一下对不起，我不太明白。非常感谢。这只适用于url：如果您尝试使用它，它将不起作用（第二个api返回一个列表）@Gjord83，正如我上面解释的那样，第二个链接返回数组，因此您需要直接分配。检查一下对不起，我不太明白。非常感谢。