ng-repeat输出当前值，ng-class的使用

最新推荐文章于 2019-10-28 16:53:57 发布

weixin_33725722

最新推荐文章于 2019-10-28 16:53:57 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liucong7708/p/6472853.html

本文通过一个具体的示例展示了如何将AngularJS与HTML相结合，实现动态内容更新及样式控制。示例中包含了AngularJS控制器的定义、作用域方法的应用、ng-repeat指令的使用以及ng-class指令来动态改变元素样式等内容。

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

<style>
    .home{
        color: red;
        background-color:lightblue;
    }
</style>
<body>
<div class="container" ng-controller="c1">
 <span  ng-repeat="x in arry">
    <label   >
        <input type="radio" id="{{x.id}}"  ng-click="shownum(x.num)" name="list" /> {{x.num}}
    </label>
  </span>
 <!--ng-class使用-->   注意这里的home用在双引号中间还要加上单引号
<h1 ng-class="'home'">
    hello world
</h1>
    <!--ng-class转换-->
yes真假切换，控制ng-class选择
 <h3 ng-class="{home:yes}" ng-click="yes=!yes">
     HELLO,ANGULARJS
 </h3>
    <hr/>

</div>

<script>
    var app = angular.module('app1', []);
    app.controller('c1', function ($scope) {
          $scope.arry=[
              {
                  'id':'liu',
                  num:965

              },{
                  'id':'luke',
                  num:562
              },{
                  'id':'jack',
                  num:326
              }
          ]
//点击当前项，输出当前项的值
  $scope.shownum=function(x){
                console.log(x);

        }


    })

</script>