angularJS

最新推荐文章于 2024-07-11 15:59:35 发布

qll_24

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qll_24/article/details/52911406

本文介绍如何使用AngularJS的ng-include指令来动态加载页面头部，并通过$http服务获取JSON数据填充列表。此外，还展示了如何利用ng-model和ng-style实现输入框中颜色值的更改实时反映在背景颜色上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-include,

angularJS http

<body class="container" ng-app="angularJSApp">
<div ng-include="'resources/http_header.html'"></div>
<div ng-controller="httpCtrl">
    <ul>
        <li ng-repeat="x in names">
            {{x.Name + ',' + x.Country + ',' + x.Url}}
        </li>
    </ul>
</div>
</body>
<script>
    var app = angular.module('angularJSApp',[]);
    app.controller('httpCtrl',function($scope,$http){
        $http.get("json/test.json")
                .success(function (response) {
                    $scope.names = response.sites;
                });
    })
</script>

其中的 ng-include 后的url不要忘记" "里还有个' ' ;

设置行内样式

下述代码实现上图功能，div背景颜色随着输入框内的改变而改变。

<body class="container" ng-app="angularJSApp">
<header class="page-header">
    <h1>设置行内样式</h1>
</header>
<div ng-controller="styleCtrl">
    <div><input type="text" ng-model="style.backgroundColor"/>{{style.backgroundColor}}</div>
    <div ng-style="style"></div>
</div>

</body>
<script>
    var app = angular.module('angularJSApp', []);
    app.controller('styleCtrl',function($scope){
        $scope.color = 'blue';
        $scope.style = {
            width: 100,
            height: 100,
            backgroundColor: $scope.color
        }
    })
</script>