I ran into a problem with my TPL template. The problem was the result of me adding hundreds of lines of model.item fields that I was getting a template error when I deployed.
In order to combat that, I need to make a child view for the model.item fields
<div data-view="techspecs"></div>
Within it's TPL, a simple row for each spec
<div class='row tspec'>
<div class='col-lg-6 col-md-6 col-sm-6 col-xs-6'>MODEL.ITEM.LABEL</div>
<div class='col-lg-6 col-md-6 col-sm-6 col-xs-6'>MODEL.ITEM.VALUE</div>
</div>
I am using the SuiteCommerce Base Theme as my theme. SCA version 2022.1.0
I am trying to understand SAID: 71051
https://suiteanswers.custhelp.com/app/answers/detail/a_id/71051/loc/en_US
It's overwhelming and doesn't tell me where to add my code on my theme.
Related
ng-repeat is very useful, however I am finding my application needing dynamic insertion of ng-repeats
Is it possible to insert html dynamically into the view from one of the javascript controllers?
Alright; my specific use-case is the following:
I have a nested ng-repeat in my view:
<div id="sunti_grid">
<div class="sunti_contain" ng-repeat="sunti in showable_suntis track by $index">
<div class="individual_sunti" ng-click="descendents(sunti.short_id); update_ancestor(sunti);" ng-dblclick="update_ancestor(null);" ng-class="{active_sunti : actively_selected_sunti == sunti.short_id}">
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
<div class="sunti_reply_carriage_wrapper" ng-if="descendents(sunti.short_id).length > 0">
<div class="sunti_reply_carriage">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in descendents(sunti.short_id)">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
</div>
</div>
</div>
</div>
So basically, sunti_grid has an ng-repeat that makes a long list of suntis and each sunti can have descendents. The descendents appear in a "carriage" that manifests immediately below the given sunti.
Now, when a user clicks on a descendent (kinda like a magically-appearing row-drop-down) I want to inject yet another carriage.
Here is a simple schematic to illustrate the feature so far:
[sunti]
[sunti]
[sunti]
[d][d][d][d][d]..
[sunti]
[sunti]
[d][d][d][d][d][d]...
Now I want to be able to inject another carriage of descendents for each descendent-row.. kinda like
[sunti]
[sunti]
[d][D][d][d][d][d]...
[D2][D2][D2][D2]...
[D3][D3][D3]...
so clicking on [D] would make the [D2] row appear, and clicking on one of the [D2]s would make row [D3] appear...
The only thing I can think of so far is to use the controller to inject a new ng-repeat for every new descendent row.
Suggestions welcome. What would be a good (read: maintainable) way of dynamically inserting ngRepeats?
I've been trying to make Masonry (also tried Salvattore but none of them will work) to work for a good few hours now, I've followed multiple tutorials and examples but it just won't happen for some reason. I'm using Bootstrap's grid system and angular to create the number of columns.
EDIT: I created a simple fiddle which actually seem to work: https://jsfiddle.net/j57vnaa2/1/
Question is, why doesn't my original code work?
I've included Masonry through the CDN, I've checked the console that the script has loaded and indeed it has. Also did it via bower and NPM to test if it worked with those but it yielded the same result.
I've set the class js-masonry to my container, which is a row with grid columns looped out via ng-repeat. Then I have set the data-masonry-options='{ "itemSelector": ".grid-item" }' as well as applied the class grid-item to my columns. But it just doesn't want to work, it's not doing ANYTHING.
I don't know what else that could be wrong, I've searched and searched the web but come up with no solution.
Is there something obviously wrong here?
<div class="row padding">
<div class="col-sm-12">
<div class="grid js-masonry row" data-masonry-options='{ "itemSelector": ".grid-item"}'>
<h1 class="text-center">Similar movies</h1>
<div ng-repeat="movie in similarMovies"
class="col-xs-12 col-sm-6 col-md-3 grid-item cut-off">
<a href="#/movies/{{movie.id}}">
<figure>
<img ng-src="{{getSrc(movie.poster_path)}}" alt="{{movie.title}}"
class="image enlarge">
</figure>
</a>
</div>
</div>
</div>
</div>
I'm developing an Angular single-page app with a responsive layout. The current page I'm working on uses a tile-based layout that auto wraps extra tiles to the next row. The HTML is below and, in the responsive layout, it can show 1, 2, or 3 tiles per row depending on the width of the row (it positions them using floats).
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="tile_2">...</div>
<div class="tile_3">...</div>
<div class="tile_4">...</div>
<div class="tile_5">...</div>
...
</div>
Now each tile will be given a "Learn More" button. The design calls for a block to expand between the row of the selected tile and the row below. This block will be the full width of the row and will be closed when the user closes it or clicks on a different Learn More button.
My first thought was to arrange the HTML as below using ng-if to hide or display the expander divs but I can't figure out the CSS needed to have it display between the rows.
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="expander_1">...</div>
<div class="tile_2">...</div>
<div class="expander_2">...</div>
<div class="tile_3">...</div>
<div class="expander_3">...</div>
<div class="tile_4">...</div>
<div class="expander_4">...</div>
<div class="tile_5">...</div>
<div class="expander_5">...</div>
...
</div>
My second thought, since I'm using Angular, was to somehow use transcluding or including to insert the relevant HTML into the appropriate spot. Again, I can't figure out how to identify where I need to insert the HTML?
I've tried searching around for other people's solutions to similar problems since I figured its not that unusual a requirement but I haven't yet been able to find anyone else who is doing this.
Can anyone else suggest what I need to do to identify the where to insert the HTML or how to generate the CSS? Or even suggest another solution that I haven't considered yet?
Although I have 70% understand of what you mean, I think ng-class can simply solve what you've faced. The solution code is like below. And I setup jsfiddle.
Html looks like this.
<div ng-app="" ng-controller="MyCtrl">
<div class="tiled_panel">
<div>Tile 1 <a href ng-click="change_tile(1)">More</a></div>
<div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div>
<div>Tile 2 <a href ng-click="change_tile(2)">More</a></div>
<div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div>
</div>
</div>
Your controller code looks like this.
$scope.change_tile = function(value){
$scope.opentile = value;
}
$scope.change_tile(0);
Css looks like this.
.expander{
visibility: hidden
}
.close{
visibility: visible
}
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.
I have multiple views like here : http://www.funnyant.com/angularjs-ui-router/
And I load them in my page like this
<div data-ui-view="content"></div> --- 75% width
<div data-ui-view="sidebar"></div> --- 25% width
Now, when the content is loaded, I want the loaded content not load inside these ui-view divs, but to replace them. Is it possible ? because if they don't replace then in my situation the float won't work and the sidebar shows bellow the content.
Help please
thanks
Using Bootstrap rows would this achieve your aim?
<div class="row">
<div class="col-md-9" ui-view="content"></div>
<div class="col-md-3" ui-view="sidebar"></div>
</div>
This is not possible and would be undesirable as it would leave you unable to change states. A simple workaround would be to add the width/float styles directly to the ui-view divs.
If you are determined to make it work you could create a custom directive wrapper like the solution provided here.
Try adding your desired sizes to the style of the containers.
<div data-ui-view="content" style="width: 75%;"></div>
<div data-ui-view="sidebar" style="width: 25%;"></div>