Question

在初始调用以获取项目列表之后（请参见下文），我需要选择第一项并从数据库中获取更多详细信息。因此，在将项目加载到我的选择输入中之后，我需要：

突出显示列表框中的第一项
将第一个itemID传递给数据库，以获取该项目的详细信息。

如何在初始页面加载期间完成所有这些操作？

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script>
        var IM_Mod_app = angular.module('IM_ng_app', []);
        IM_Mod_app.controller("IM_Ctrl", function ($scope, $http) {
            var PlaId = "DFC";

            $http({
                method: 'GET',
                url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems',
                params: { PlaId: PlaId }
            }).then(function successCallback(response) {
                $scope.items = response.data;
            }, function errorCallback(response) {            });
        });
    </script>  
</head>

<body ng-app="IM_ng_app">
    <table ng-controller="IM_Ctrl">
        <tr>
            <td>
                @*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items" ng-class="{selected: $index==0}" ng-change="onItemSelected(itm.ITEM_ID)">*@
                @*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID" ng-selected="$first" >*@
                <select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID"  ng-init="items[0].ITEM_ID">
                <option value="" ng-if="false"></option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

尝试初始化$ scope.itm

假设我有

 <select ng-model="whatever">
       <option value="hello">bye</option>
       <option value="hello2">..</option>
 </select>

如果初始化$ scope.whatever =“ hello”，再见将显示在选择中

Answer 2

您的ng-init无法正常工作，因为页面加载时数组没有任何数据。相反，它必须在任何数据可用之前完成$http调用。这仅意味着您需要在$http上打来电话时结束您的工作。

您更新的AJAX调用可能如下所示

.then

前进，我不鼓励使用$http({ method: 'GET', url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems', params: { PlaId: PlaId } }).then(function successCallback(response) { $scope.items = response.data; //Initial the select box $scope.itm = $scope.items[0]; //Get the details getSelectedItemDetails(); }, function errorCallback(response) { }); function getSelectedItemDetails() { $http({}) //whatever API endpoint to get the details .then(function (response) { // do something with the data. Maybe extend $scope.itm? }) }。相反，只需在javascript中初始化变量的值即可。由于angular的双向绑定，因此从javascript对该值进行的任何更新都会将其更新为HTML。

angularjs突出显示select中的第一项

2 个答案: