Anilananda Ответов: 0

Выпадающий список привязка с angularjs на странице .aspx

Привет,
Я использую materialize css для разработки веб-страницы ... я также использую один веб-сервис и angularjs .

теперь я хочу привязать выпадающий список на странице .aspx , стиль которой будет материализовывать тип css...

так что форма angularjs у меня есть все значения, но когда я связываюсь с dorpdown list, то значение не приходит..
если я удаляю класс materialize.min.css, то значение приходит ....
может быть, я пропустил какую-то часть materializecss...

может ли кто-нибудь помочь плз ...

Что я уже пробовал:

Это мой код. :



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="myApp.demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <script type="text/javascript" src="Script/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myRole', []).controller('roleCtrl', function ($scope, $http) {
            $scope.allRoleList = null;
            $scope.getAllRole = function () {
                $http({
                    method: 'GET',
                    url: 'myService.asmx/GetRole',
                    data: {}
                }).then(function (result) {
                    // alert('ok');
                    $scope.allRoleList = result.data;
                    debugger;
                });
            };           
            $scope.getAllRole();
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div ng-app="myRole" ng-controller="roleCtrl" class="input-field col s8 l6 m6">
                <select data-ng-model="role" data-ng-options="r.roleId as r.roleName for r in allRoleList">
                    <option value="">-- Select Role --</option>
                </select>

            </div>
        </div>
    </form>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('select').material_select();
        });
    </script>
</body>
</html>

Karthik_Mahalingam

протестировали ваш код с фиктивными данными, он отлично работает..

Anilananda

Омг ! я ДНТ знаю, что все еще не получаю ...
если рядом материализовался Css, то он приближается ...опять же, если я добавлю, что css, то данные не являются обязательными...

Karthik_Mahalingam

это то, что я пробовал


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


    <script type="text/javascript">
        angular.module('myRole', []).controller('roleCtrl', function ($scope, $http) {
            $scope.allRoleList = null;
            $scope.getAllRole = function () {
                $scope.allRoleList = [
                    { roleId: 1, roleName: 'a' },
                    { roleId: 2, roleName: 'b' },
                    { roleId: 3, roleName: 'c' },
                    { roleId: 4, roleName: 'd' },
                ]
            };
            $scope.getAllRole();
        });
    </script>

</head>
<body>
    <form id="form1"  >
        <div class="container">
            <div ng-app="myRole" ng-controller="roleCtrl" class="input-field col s8 l6 m6">
                <select data-ng-model="role" data-ng-options="r.roleId as r.roleName for r in allRoleList">
                    <option value="">-- Select Role --</option>
                </select>

            </div>
        </div>
    </form>

   
    <script type="text/javascript">
        $(document).ready(function () {
            $('select').material_select();
        });
    </script>
</body>
</html>

Anilananda

ууу ! Теперь это работает...Спасибо #Karthik

эти два я дал в головном разделе, так что значение кое-где отсутствовало ..

...

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


сейчас это работает...

Karthik_Mahalingam

крутой.

0 Ответов