angularjs выделить первый элемент в выборе

После первоначального вызова для получения списка элементов (см. ниже) мне нужно выбрать первый элемент и получить более подробную информацию из моей базы данных. Итак, после загрузки элементов в мой выбор ввода мне нужно:

  • Выделите первый элемент в списке
  • Передайте этот первый 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>

angularjs angularjs-select
person user11130182    schedule 15.03.2019    source источник
comment
Что вы подразумеваете под выделением первого элемента? Вы имеете в виду выбрать первый элемент после того, как вы вернете список из своего первого http-вызова?   -  person ryanyuyu    schedule 15.03.2019
comment
Когда список загружается по умолчанию, необходимо выделить первый элемент и отобразить сведения об этом элементе, передав его в БД, и все нужно сделать при загрузке страницы.   -  person user11130182    schedule 15.03.2019

Ответы (2)


arrow_upward
0
arrow_downward

Ваш ng-init работает не так, как вы ожидаете, потому что в вашем массиве нет данных при загрузке страницы. Вместо этого он должен завершить вызов $http до того, как будут доступны какие-либо данные. Это просто означает, что вам нужно закончить свою работу, когда ваш $http вызов вернется (в .then).

Ваш обновленный вызов AJAX может выглядеть так

        $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?
                })
        }

В дальнейшем я не рекомендую использовать ng-init. Вместо этого просто инициализируйте значение ваших переменных в вашем javascript. Из-за двусторонней привязки angular любые обновления значения из javascript будут перенесены в HTML.

person ryanyuyu    schedule 15.03.2019

arrow_upward
0
arrow_downward

Попробуйте инициализировать $scope.itm

скажем, у меня есть

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

Если вы инициализируете $scope.whatever = "hello" bye будет отображаться в списке выбора

person Aw Snap    schedule 15.03.2019
comment
пытался использовать ng-init=items[0].ITEM_ID, но у меня это не сработало. - person user11130182; 15.03.2019
comment
попробуйте написать $scope.itm = то, что вы хотите отобразить; внутри ‹скрипта› - person Aw Snap; 15.03.2019