angularJS输入内容渲染添加_angular根据后端的数据动态渲染-CSDN博客

第一种无按钮方式：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app = angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               //定义数据源
               $scope.list = [];
               //判断点击的是回车键
               $scope.enterKey = function(event){
                   if(event.keyCode == 13){
                       //alert("回车");
                       //追加内容。
                       $scope.list.push($scope.text);
                       //$scope.list.unshift($scope.text);
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <input ng-model="text" ng-keyup="enterKey($event)" />
       <ul>
           <li ng-repeat="x in list track by $index">{{x}}</li>
        </ul>
   </body>
</html>

第二种带按钮方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日考15-实现输入内容渲染页面</title>
    <script src="angular1.4.6.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);

        app.controller("myController",function($scope){
            $scope.ullist=["132","456"];

            $scope.bc=function(){
                var a=$scope.asd;
                $scope.ullist.unshift(a)
            }
        })

    </script>
</head>

<body ng-app="myApp" ng-controller="myController">
<input ng-model="asd">
<button ng-click="bc()">add</button>
<ul>
    <li ng-repeat="l in ullist track by $index">{{l}}</li>
</ul>

</body>
</html>