How to insert a value into a div from an array in angular js?

S

shnicel2015-01-03 14:50:15

JavaScript

shnicel, 2015-01-03 14:50:15

The question is, the first time I encountered angular, I want to start studying, I looked at a couple of lessons on YouTube and decided to try it, and the question immediately arose of how to arrange the div id from what is in the Ajax array?

<script>
  var app = angular.module('app',[]);
    app.controller("profileCtrl", function(){
      var req="https://api.vk.com/method/users.get?user_ids=1"
      $.ajax({
          url : req,
          type : "GET",
          dataType : "jsonp",
          success : function(msg){
          //console.log(msg.response[0]);
          }
      });
    })
</script>

</head>
<body ng-app="app">
  <div class="container">
    <div class="profile" ng-controller="profileCtrl">
      <div id="First_name"></div>
      <div id="Last_name"></div>
      <div id="City"></div>
      <div id="Avatar"></div>
    </div>
  </div>
</body>

If I understand correctly, then it should look like in curly braces?
I would be very grateful if someone throws off the material where the work of angular and vk api is described)

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

K

Konstantin Samsin, 2015-01-03
@shnicel

<script>
  var app = angular.module('app',[]);
    app.controller("profileCtrl", function(){
      var req="https://api.vk.com/method/users.get?user_ids=1"
      $.ajax({
          url : req,
          type : "GET",
          dataType : "jsonp",
          success : function(msg){
          //console.log(msg.response[0]);
$scope.msg = msg.response[0]
          }
      });
    })
</script>

And in the layout {{msg}} where necessary

C

coderisimo, 2015-01-03
@coderisimo

"$.ajax({....." is this jQuery?
There is a $http module for requests in Angular - https://docs.angularjs.org/api/ng/service/$http
then after getting the data you put it in model type :

..... success(function (data) {
                                    $scope.data_from_server = data;
                                });

and in the markup you have:

</head>
<body ng-app="app">
  <div class="container">
    <div class="profile" ng-controller="profileCtrl">
      <div id="First_name"> {{data_from_server.First_name}} </div>
      <div id="Last_name"> {{data_from_server.Last_name}} </div>
      ..........
    </div>
  </div>
</body>

this is in general terms. but it would be better if you took and dismantled a ready-made example. it's pretty clear there.