javascript - Angularjs creating a div grid from a list -


I'm new to AngularJS and I'm trying to create the following structure: 

  & Lt; Div class = "zone" & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Button ID = "BTN 94" class = "SPAN 4 BTN" & gt; All zones & lt; / Button & gt; & Lt; Button ID = "BTN 95" class = "SPAN 4 BTN" & gt; Region 1 & lt; / Button & gt; & Lt; Button ID = "BTN 9 6" class = "SPAN 4 BTN" & gt; Zone 2 & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Button id = "btn97" class = "span4 btn" & gt; Zone 3 & lt; / Button & gt; & Lt; Button id = "btn98" class = "span4 btn" & gt; Zone 4 & lt; / Button & gt; & Lt; Button ID = "BTN 99" class = "SPAN 4 BTN" & gt; Area 5 & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Button id = "btn100" class = "span4 btn" & gt; Area 6 & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 In my controller I am getting the zone through reliable web service and successfully making a scope object popular.  
  ** Admin  *    
  ZonesFactory.query (function (data) {// success handler var results type = Data.contact type; var objects = data.Scent.value = $ scope.zoneList = []; Console.log (object); if (resultTap == "list") {angular (objects, functions) {item} $ Resource (item.HRF) .Gate (function (line data) {$ scope.zoneList .push (rowData.zone);})}}}}}}, function (error) {// error handler}};   
  ** In HTML **   
  & lt; Div class = "zones" & gt; & Lt; Div class = "line-fluid" & gt; & Lt; span ng-repeat = "area in zone area" & gt; & Lt; Button ID = "{{$ index}} class =" span4btn "& gt; {{zone}} & lt; / button & gt; & lt; span ng-if =" ({{index $}}% 3) == 0 "> 
 
     
 However, I was able to break into a new division after every three items in the list. I am faced with the following : 1. Creating a simple grid structure with div and no spans 2. How to increase an ID of BTXX (where x is a number) How to create a wind id, how can I create a grid structure using thw div, and how to increase the number part of the button ID.   
 
 
 You can  ng-repeat  on the array of numbers that display the rows, and nested to display  ng-repeat  use  ng-if  appropriate indexed button.  
  
  
  NG-if  logic can be beautiful, but you get this idea.  
 Each button has been created with a simple interpolation of  id . To match the output required in your question, just enter every  $ index  in 94 I add.  
 Here's a working demo:    You can change the 94 with the initial variables on your scope to ensure the specificity.

 






























    





Comments











Post a Comment

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

I'm in the middle of homework work and I'm stuck. At this point in my code, I think that I should have a GUI window that opens and allows me to type "inserted text number". Notice is not going anywhere but at this point, If I pass through the problem then it will be in a linked list. I am getting two of the same error for the lines. Add (index, element); And I can not seem to get past it, there is no suitable method for the error "add (int, java. string string)". Code is below, please advise. To clarify - this will not be a method error because it is a linked list. There should not be any way involved. import java.awt. *; Import java.awt.event. *; Import javax.swing. *; Import java.util. *; Import java.util.Scanner; Import java.util.LinkedList; Public class TopTenList JFrame {Private TopTenList tt; See the Private JTextArea list; Private JTextField cmdTextField; Private JTextField resultsTestfield; // This GUI window is the code for the public toptist...
Read more

java - JPA TypedQuery: Parameter value element did not match expected type -

I am using JPA 2.0 and getting the following code in the DAO layer: Public Zero Test () {string key = "status"; String [] Conditions = {"A", "B"}; & Lt; TestTable & gt; Results = Search (Keys, Conditions); } Public listing & lt; TestTable & gt; Search (string key, object value error) {string sql = "test ndf to testlet and jade nand." + Key + "in:" + key; TypedQuery & LT; TestTable & gt; Query = entityManager.createQuery (SQL, TestTable.class); Query.setParameter (key, Arrays.asList (valueArr)) / *** Error Line *** Return query.getResultList (); } In the above error line, it throws the following exception: java.lang.IllegalArgumentException: parameter value element [[Ljava.lang.String; @ cbe5bc] did not match the expected type [java.lang.String] Why is this expected type string while actually this string []? Please help! Note: This is derived from the normal routine and is a simplified code. I can no...
Read more

c++ - static template member variable has internal linkage but is not defined -

Yes, I know, there is a question with almost the same title, but it refers to a different situation. Error message) In my case, I have a .cpp file with a big named designation name (implementation details). There is a property class template with a static data member in that name space, which I need to access from outside the unknown namespace. I give it a little bit of meat: file.hpp namespace Bar {template & lt; Typename A & gt; Struct foo {static_assert (is_same & lt; a, float & gt; :: value} is_same & lt; a, double>: value, ""); Fixed zero set_static_var (a const & x); // ...}; } and file.cpp namespace {template & lt; Typename A & gt; Struct foo_traits {// supports the implementation of several static code bars: foo & lt; & Gt; Fixed A data; }; The template's & lt; & Gt; Float foo_traits & lt; Float & gt; :: datum; // No change if this is in the global namespace template & lt; & Gt; Doub...
Read more