理解angularjs MVVM 模型逻辑,数据交互显示的过程_angular中模型的数组怎么对应得到view

作者：空白诗007 | 2024-07-24 11:36:44

踩

angular中模型的数组怎么对应得到view

第一步：先看mvvm的结构图：

1. php server ----server Model

Angularjs 从后台获取的数据，把数据传给视图模型，$scope视图模型部分：

视图模型部分: ViewModel视图模块对应的程序: 通过$scope作用域定义name属性值，将“hello” 这条数据内容显示在视图中

var m =angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.name="hello";

}])

在 $scope中写了数据，但是如果真正到了项目里面，我们的数据都是从后台获取的，而不是自己敲出 “hello” 数据：

但是 scope也需要放到一个位置里面，要把scope放到控制器里面面，结构图中浅绿色部分就是控制器部分。

scope 再把数据传给视图 view中，也就是大家都能看到的界面， $scope中有啥，就会传给视图。

下面我们看个例子，从后台获取数据，数据传给视图模型，再通过scope，将数据呈现在界面上：

下图中各种图书的类型，就是后台的数据（全部、Angularjs、as3、html、css）


                      
 
    app.controller('booklist',function ($scope,$http) {
        $scope.booklist={};
        $http.get('data/bookslist.json')
            .success(function(item){
                $scope.booklist =item;
            })
    });

1.通过$http服务向后台请求json数据，请求成功之后（success之后），向 SERVER请求

2.其中item就是从后台获取的数据，

3.将item数据赋值给scope定义的booklist属性，

4. 获取booklist数据，上图中显示的图书列表（全部、Angularjs、as3、html、css），就是 book.name的数据


<li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})">					
<a> <span class="glyphicon {{book.img}}"></span> {{book.name}}</a>
</li>

第二步：

到了这一步，就体现出了MVVM模型的概念，而且体现了双向数据绑定，（这是jQuery）中不能实现的（体现了jQuery，获取数据方面的缺陷，可在jQuery笔记中看到）

后台数据给 “视图模型”（M）, 视图模型将它中的数据给"视图"（V），如果“视图”（V）改变时，它相应视图的改变也会，也会同步到“视图模型”（M），所以构成了 MVVM

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/874468