简单小例子带你明白Angular的MVVM思想

最新推荐文章于 2022-03-02 02:15:39 发布

weixin_30822451

最新推荐文章于 2022-03-02 02:15:39 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanglei9308/p/6364726.html

版权

js部分Angular的相关配置如下：

<script src="angular.min.js"></script>
    <script>
        //controller
        function test1($scope) { //依赖注入
            $scope.val="输入文字";
            $scope.fnChange=function (ev) {
                //console.log(this)  =$scope
                //想要得到input的value
                //ev.target.value 通过event对象获取当前发生时间的input 的value
                console.log(ev.target.value);
                $scope.val = ev.target.value//让数据(m)等于获取到视图(v)里面的值

            }
        };
 </script>

html部分如下：

<body ng-app >
<div ng-controller="test1">
    <input type="text" ng-model="val"  />
    <p>{{val}}</p>
</div>
<div ng-controller="test1">
   <input type="text" ng-value="val" value="{{val}}" ng-keyup="fnChange($event)" />
   <p>{{val}}</p>
</div>
<!--ng-value="val" === value="{{val}}"-->
<!--ng-model把数据和视图绑定一起-->
<!--mvc 数据改变了，视图也会自动发生改变 m=v -->
<!--当视图发生改变的时候，也想改变数据 v =>m -->
<!--mvvm-->
</body>

转载于:https://www.cnblogs.com/yanglei9308/p/6364726.html