Dropdown list bind with angularjs in .aspx page

Question

0.00/5 (No votes)

See more:

Hi,
I'm using materialize css to design the web page ... i'm also using one webservice , and angularjs .

now i want the bind a dropdown list in .aspx page , whose style will be materialize css type...

so form angularjs i got all values but when i bind with dorpdown list then value is not comming..
if i remove the materialize.min.css class then the value is comming ....
may be i miss any proparty of materializecss...

can any one help plz ...

What I have tried:

This is my code :

<%@ 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>

Posted 24-Sep-17 21:41pm

Anilananda

Updated 12-Nov-17 23:44pm

Add a Solution

Comments

Karthik_Mahalingam 25-Sep-17 4:52am

have tested your code with dummy data, it works fine..

Anilananda 25-Sep-17 5:21am

OMG ! i dnt know still im not getting ...
if close materialized Css then it is coming ...again if i add that css then data is not binding...

Karthik_Mahalingam 25-Sep-17 5:24am

this is what i have tried


<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 25-Sep-17 5:31am

waoo ! Now it working...Thanks #Karthik

this two i given in the head section so value was missing some where ..

...

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

now it it is working...

Karthik_Mahalingam 25-Sep-17 5:45am

cool.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)