Angularjs update ng-repeat table DOM Dynamically

Angularjs update ng-repeat table DOM Dynamically

In this Post We Will Explain About is Angularjs update ng-repeat table DOM Dynamically With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to ng-repeat with dynamic Angularjs list, without rebuilding entire DOM treeExample

How to dynamically remove/delete elements Example

In this post we will show you Best way to implement Adding Items to a Angularjs List, hear for updating corresponding DOM Dynamically using AngularJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  Angular Dynamic Counter Update value

Include Libs.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller="ComputerPartsCtrl">
//some code..........
</div>

index.html

<body>
<div ng-controller="ComputerPartsCtrl">
    Enter Your Name : <input type="text" ng-model="name">
    Select a Items :
        <select ng-model="selectedItems" ng-options="item for item in products">
        </select>
    <hr/>
    List of Items :
    <ul><li ng-repeat="item in products">{{item}}</li></ul>
    <hr />
    Name : {{name}}<br />
    Selected item : {{selectedItems}}
    <hr />
    Add more products :
        <input type="text" ng-model="newproduct">
        <button ng-click="addproducts()">Add</button>
</div>
</body>

script.js

<script type="text/javascript">
    function ComputerPartsCtrl($scope){
        $scope.name="infinityknow.com"
        $scope.products=['DVD','Computer','Laptop'];
        $scope.addproducts=function(){
            $scope.products.push($scope.newproduct);
        }
    }
</script>

Full Example of Adding Items to a Angularjs List and updating Items

<!doctype html>
<html ng-app>
<head>
<title>Adding Items to a JavaScript List and updating corresponding HTML DOM Dynamically</title>
<script type="text/javascript">
    function ComputerPartsCtrl($scope){
        $scope.name="infinityknow.com"
        $scope.products=['DVD','Computer','Laptop'];
        $scope.addproducts=function(){
            $scope.products.push($scope.newproduct);
        }
    }
</script>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller="ComputerPartsCtrl">
    Enter Your Name : <input type="text" ng-model="name">
    Select a Items :
        <select ng-model="selectedItems" ng-options="item for item in products">
        </select>
    <hr/>
    List of Items :
    <ul><li ng-repeat="item in products">{{item}}</li></ul>
    <hr />
    Name : {{name}}<br />
    Selected item : {{selectedItems}}
    <hr />
    Add more products :
        <input type="text" ng-model="newproduct">
        <button ng-click="addproducts()">Add</button>
</div>
</body>
</html>

Example

READ :  Angular UI Grid Table Example Steps

I hope you have Got What is Attributes and properties using AngularJS And how it works.I would Like to have Feedback From My Blog(infinityknow.com) readers.Your Valuable Feedback,Any Question,or any Comments about This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *