angularjs数据交互

异步问题ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有。要不然无法绑定数据。
<!DOCTYPE html>
<html ng-app="test_ajax">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="angular.js" charset="utf-8"></script>
        <script src="jquery.js"></script>
    <script>
    let mod=angular.module(‘test_ajax‘, []);
    mod.controller(‘main‘, function ($scope){
      $.ajax({
        url: ‘arr.txt‘,
        dataType: ‘json‘,
        success(res){
          $scope.arr=res;
          $scope.$apply(); //检查
        },
        error(){
          alert(‘错了‘);
        }
      });
    });
    </script>
  </head>
  <body ng-controller="main">
    <ul>
      <li ng-repeat="a in arr">{{a}}</li>
    </ul>
  </body>
</html>
$scope.$apply(); //检查

直接用angularjs方法get方法请求数据
<!DOCTYPE html>
<html ng-app="test_ajax">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="angular.js" charset="utf-8"></script>
    <script>
    let mod=angular.module(‘test_ajax‘, []);
    mod.controller(‘main‘, function ($scope, $http){
      $http.get(‘arr.txt‘).then((res)=>{
        $scope.arr=res.data;
      }, (err)=>{
        alert(‘错了‘);
      });
    });
    </script>
  </head>
  <body ng-controller="main">
    <ul>
      <li ng-repeat="a in arr">{{a}}</li>
    </ul>
  </body>
</html>

原文地址:https://www.cnblogs.com/tianranhui/p/9333530.html

时间: 2024-08-10 09:58:24

angularjs数据交互的相关文章

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

详解angularJs中自定义directive的数据交互

就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-controller="myCtrl"> <test-directive><

[email&#160;protected]$http服务与后台数据交互

1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>$http与后台数据交互</title>    <meta charset="utf-8">        <link rel="stylesheet" href="../css/bootstrap.css">

AJAX+REA实现前后台数据交互的加密解密

AJAX+REA实现前后台数据交互的加密解密 1.创建js文件Encryption.js /**  * 加密解密  */ /** RSA加密用 生成key */ function bodyRSA(){ /** 1024位的key参数写130,2014位的key参数写260 */ setMaxDigits(130); /** ajax 调用后台方法,取回公钥 */ var keyR ;     $.ajax({      url: "/GHGL/Key/pk",//请求后台的url,本例

浅谈混合开发与Android,JS数据交互

本文是作者原创,如转载请注明出处! 一.概论 现在时代已经走过了移动互联网的超级火爆阶段,市场上移动开发人员已经趋于饱和,显然,只会原生APP的开发已不能满足市场的需求,随着H5的兴起与火爆,H5在原生APP中的使用越来越广泛,也就是我们常说的混合开发(Hybrid APP).最新很火的微信小程序相信大家都是知道的,实际上微信小程序加载的界面就是一个HTML5的界面,HTML5界面在一些电商类的APP中主要承担展示数据的作用,但是他的作用并不仅限于此,最起码js调用原生方法和原生调用js的方法是

Struts2基本使用(三)--数据交互

Struts2中的数据交互 在Struts2中我们不必再使用request.getParameter()这种方式来获取前台发送到服务器的参数. 我们可以在服务器端的Java类中直接声明一个和前台发送数据的同名变量即可,然后生成它的set/get方法即可以实现前后台数据的交互. 假如我们在前台页面中的表单如下: <form method="post" action="demo!register.action"> username:<input typ

JavaScript模板引擎实现数据交互

经过1年的磨练,近期终于稍微明白到,前端是怎么做到企业要求的:数据交互. 1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事? 2,可以通过JS框架和JS模板来实现,但最后还是要用到ajax+json的. 注意:个人建议 假如项目页面数量是少于50-100个的,那么推荐使用JS模板:如果大于100个的用JS框架.各有各优势嘛. 今晚的博客分几次写完,看到这句话删除就证明已经写完了. 先分享JS模板的内容:我这次推荐使用百度的模板引擎,因为他比腾讯的art运行速

ASP.NET MVC 4 中的JSON数据交互

前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 return Content("{\"id\":\"1\",\"name\":\"A\"}"); 为了严格符合Json数据格式,对双引号进行了转义. 使用JavaScriptSerialize.Serialize()方法将对象序列化为JSON格式的字符串 MSDN 例如我们有一个匿名对象: var tempObj=new

Spring MVC基础知识整理?View与Controller数据交互

概述 Spring MVC是由View—Controller—Model组成,其中View和Controller的数据交互,成为了关注的核心点.MVC中,我们将View中的数据传递到Controller,可以采用POST或者Get,传递相应的参数.Controller通过绑定来,匹配前台传递的参数.后台Controller也可以将值传递到前台页面. View值传递Controller 绑定传值的常用方式有如下 @RequestParam,绑定单个请求数据,可以是URL中的数据,表单提交的数据或上