jonahbron / angular-owl-carousel

**ARCHIVED**: This library is for AngularJS. Neither that framework nor this library should be used at this point in time.
43 stars 36 forks source link

templating items? #17

Closed r3wt closed 8 years ago

r3wt commented 8 years ago

how do i template the items? there are no clear directions? am i supposed to pass html as an array for items? this sucks balls.

r3wt commented 8 years ago

@jonahbron would you please be kind enough to tell me why there is nothing showing up in the div?

jade

.owl-carousel(owl-carousel="trendingMynds",nav="false",dots="false",margin="10",items="3")
      {{item}}

controller

(function() {
    'use strict';

    angular
        .module('app.dashboard')
        .controller('DashboardV3Controller', DashboardV3Controller);

    DashboardV3Controller.$inject = ['$rootScope','$state','$http','RouteHelpers','$window'];
    function DashboardV3Controller($rootScope,$state,$http,RouteHelpers,$window) {
        var vm = this;

        activate();

        function activate() {

          vm.trending = [];
          vm.trendingMynds = [];

          vm.connections = 500;

          $http
          .post(  RouteHelpers.APIRequestPath('/users/list'), { sort: 'trending', filters: [{ key: '_id', val: { $ne:  $window.localStorage.user_id } }] }).then(function(response){
             var data = response.data.data; 

             vm.trending = data;

             for(var i=0;i<data.length;i++){

                var j = data[i];

                var profileImg = j.profileImgUrl;
                if(profileImg == null){
                    profileImg = 'app/img/user/default-profile.png';
                }

                var headerImg = j.bannerImgUrl;
                if(headerImg == null){
                    headerImg = 'app/img/bg3.jpg';
                }

                var currentRole = j.CurrentRole;
                if(currentRole == null || currentRole == ''){
                    currentRole = '&nbsp;';
                }

                var mantra = j.mantra;
                if(mantra == null || mantra == ''){
                    mantra = '&nbsp;';
                }

                var conns = j.connectedConnections;

                var fullName = j.fullName;

                var chunk = '<div class="col-lg-4">'+
                '  <div class="panel widget">'+
                '    <div class="half-float"><img src="'+headerImg+'" alt="" class="img-responsive"/>'+
                '      <div class="half-float-bottom"><img src="'+profileImg+'" alt="Image" class="img-thumbnail img-circle thumb128"/></div>'+
                '    </div>'+
                '    <div class="panel-body text-center">'+
                '      <h3 class="m0">'+fullName+'</h3>'+
                '      <p class="text-muted">'+currentRole+'</p>'+
                '      <p>'+mantra+'</p>'+
                '    </div>'+
                '    <div class="panel-body text-center bg-gray-dark">'+
                '      <div class="row row-table">'+
                '        <div class="col-xs-4">'+
                '          <h3 class="m0">0</h3>'+
                '          <p class="m0">Photos</p>'+
                '        </div>'+
                '        <div class="col-xs-4">'+
                '          <h3 class="m0">0</h3>'+
                '          <p class="m0">Likes</p>'+
                '        </div>'+
                '        <div class="col-xs-4">'+
                '          <h3 class="m0">'+conns+'</h3>'+
                '          <p class="m0">Connections</p>'+
                '        </div>'+
                '      </div>'+
                '    </div>'+
                '  </div>'+
                '</div>';

                vm.trendingMynds.push(chunk);

             }

             console.log(vm.trendingMynds);// data is there!

          });

        }
    }
})();

Additonal Info

I am pretty new to this "angular way" in general. i tried to follow the directions, but at some point i am lost. would you care to point me in the right direction?

r3wt commented 8 years ago

I was finally able to get it to insert the items into the carousel, however the html is escaped. i am trying to find a workaround, if i do i will submit pr.

r3wt commented 8 years ago

@jonahbron