JSON REST
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="str">"lsProduct"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"p1"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"precio"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"100"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"nombre"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Producto 1"</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"p2"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"precio"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"200"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"nombre"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Producto 2"</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"p3"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"precio"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"300"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"nombre"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Producto 3"</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"id"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"p4"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"precio"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"400"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"nombre"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Producto 4"</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">]</span> |
HTML View
1 2 3 4 5 6 7 8 9 | <span class="tag"><tr</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"rsProduct in lsProduct"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Nombre: {{rsProduct.nombre}}</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln">Precio: {{rsProduct.precio}}</span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"check"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"{{rsProduct.id}}"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"actionProduct"</span><span class="pln"> </span><span class="atn">ng-click</span><span class="pun">=</span><span class="atv">"agregarCanasta(actionProduct, rsProduct)"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></label></span><span class="pln"> </span><span class="tag"></td></span><span class="pln"></span><span class="tag"></tr></span> |
Angular Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="pln">$scope</span><span class="pun">.</span><span class="pln">lsCanasta </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="com">//declararlo al inicio del controller</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">agregarCanasta </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">actionProduct</span><span class="pun">,</span><span class="pln"> rsProduct</span><span class="pun">){</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> id_product </span><span class="pun">=</span><span class="pln"> rsProduct</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">actionProduct </span><span class="pun">==</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">){</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"agregando ... "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> id_product</span><span class="pun">);</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">lsCanasta</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">id_product</span><span class="pun">);</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#"</span><span class="pun">+</span><span class="pln">id_product</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"checked"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"retirando ... "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> id_product</span><span class="pun">);</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">lsCanasta</span><span class="pun">.</span><span class="pln">splice</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">lsCanasta</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="pln">rsProduct</span><span class="pun">),</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#"</span><span class="pun">+</span><span class="pln">id_product</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">"checked"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="pun">}</span> |
Julio Pari (IT Architect IBM)
Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/