Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

Monday, August 4, 2014

How to bind dynamically HTML Ordered List in Asp.net using AngularJS?

Today I will show you a very simple example on binding HTML Ordered List dynamically in Asp.net using AngularJS.

Follows the steps:

Step 1: Create a project with asp.net empty web application and add web form in it.

Step 2: Now, paste following code in ".aspx" page
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-controller="itemController">
            <ol>
                <li ng-repeat="item in items">{{ item }}
                </li>
            </ol>
        </div>

        <script>
            function itemController($scope) {
                $scope.items = [<%=items%>];
            }

        </script>
        <script 
            src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

        </script>

    </form>
</body>
</html>


Step 3: Now, paste following code in ".aspx.vb" code behind page
Public Class WebForm1
    Inherits System.Web.UI.Page

    Public items As String = ""

    Protected Sub Page_Load(ByVal sender As Object,
                            ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            'You can change this items dynamically '
            items = "'Orange', 'Apple', 'Banana', 'Grape', 'Watermelon'"
        End If

    End Sub

End Class


Result will be:

1.Orange
2.Apple
3.Banana
4.Grape
5.Watermelon


React-select is very slow on larger list - Found solution - using react-window

 I had more than 4000 items in searchable dropdownlist. I have used react-select but it was very slow. finally I found complete solution to ...