Question

当我用angularjs填充我的选择时，我有两个小问题。

我用api休息的结果填充我的选择（我使用了模拟）

我的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>

我的app.js：

(function () {
'use strict';

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];

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

})()

API：http://www.mocky.io/v2/5a2112be2d0000040ee000aa

返回：

{"id" : 1, "name" : "France - Mainland", "desc": "some description"}

现在我有两个问题：

与上面的示例类似，选择部分正常。如果我打开选择，我可以看到：

你可以看到我有第一个字段正确，但在另一个未定义，我不知道为什么

第二个问题是我是否有来自API的对象列表，例如使用http://www.mocky.io/v2/5a2132f32d00006116e00178更改呼叫的网址，该网址返回：

[{“id”：1，“name”：“France - Mainland”，“desc”：“some description”}， {“id”：2，“name”：“Italy”，“desc”：“some description”}]

我有所有选项字段，如undefined（见下图）

怎么了？

谢谢！

Answer 1

问题是你的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
  });

DEMO

Answer 2

<select ng-model="selectedTestAccount" ng-if="item.name"
    ng-options="item.id as item.name for item in testAccounts">
<option value="">Select Account</option>
</select>

ng-if仅在定义值时允许

使用angularjs填充select

2 个答案: