嘗試在AngularJS中從控制器（$ scope）向視圖（HTML）中插入元素

-1

我想在項目的視圖中插入字典（對象數組）。該視圖被稱爲「產品」，控制器被稱爲「ProductCtrl」。

我想要顯示的輸出只是靜態數據。下面是我的代碼：

/* 
 
* "product" module. 
 
*/ 
 
'use strict'; 
 

 
angular.module('myApp.products', ['ngRoute']) 
 

 
.config(['$routeProvider', function($routeProvider) { 
 
    $routeProvider.when('/products', { 
 
    templateUrl: 'products/products.html', 
 
    controller: 'ProductCtrl' 
 
    }); 
 
}]) 
 

 
.controller('ProductCtrl', [function($scope) { 
 
//the problem is that I wanna insert those elements using angular and I cannot. 
 
    $scope.productos=[ 
 
\t \t {titulo:"1111", descripcion:"!", precio: 25.95, \t imagen: "camisetas2.png"}, 
 
\t \t {titulo:"2222", descripcion:"!A", precio: 25.95, \t imagen: "camisetas3.png"} 
 
\t \t 
 
\t \t ]; 
 

 
}]);

<!--("Producto" View-HTML)--> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="row" ng-controller="ProductCtrl"> 
 
\t <div class="col-md-12"> 
 
\t 
 
\t \t <div class="row" ng-repeat="producto in productos"> <!-- Basic for loop --> 
 
\t \t \t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <!-- Inicio del contenido; se exponen la empresa y sus servicios (9/4 grid system) --> 
 
\t \t \t \t \t \t \t <h2>{{ producto.titulo }}</h2> 
 
\t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t <img width="120" height="120" alt="mundo camis" src="img/mundo.jpg" class="img-circle"> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="col-md-10"> 
 
\t \t \t \t \t \t \t \t \t <div class="caption"> 
 
\t \t \t \t \t \t \t \t \t \t <h3> {{ producto.titulo }} </h3> 
 
\t \t \t \t \t \t \t \t \t \t \t <p> {{ producto.descripcion }} </p> 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t <p> <a class="btn-primary" href="#">Ver más</a> </p> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <br /> <br /> 
 
\t \t 
 
\t </div> 
 
</div> 
 
</div>

來源

2015-12-21 Ibon Reinoso

那麼，什麼是你的問題/期望？ –

你有一些錯誤，以及最重要的 - 不設置ng-app屬性。我爲你使用了一個簡單的例子。代碼如下，鏈接：http://codepen.io/anon/pen/GoqWyM。

我建議從以下教程學習Angular：http://campus.codeschool.com/courses/shaping-up-with-angular-js/。

答案：

/* 
 
* "product" module. 
 
*/ 
 
'use strict'; 
 

 
var app = angular.module('Products', []); 
 

 
app.controller('Producto', [function() { 
 

 
    this.productos=[ 
 
\t \t {titulo:"1111", descripcion:"!", precio: 25.95, \t imagen: "camisetas2.png"}, 
 
\t \t {titulo:"2222", descripcion:"!A", precio: 25.95, \t imagen: "camisetas3.png"} 
 
\t \t 
 
\t \t ]; 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="Products" class="row" ng-controller="Producto as ProdCtrl"> 
 
    <div ng-repeat="producto in ProdCtrl.productos"> 
 
    {{ producto.titulo }} 
 
    </div> 
 
</div>

來源

2015-12-21 16:26:53 YishaiG

嘗試在AngularJS中從控制器（$ scope）向視圖（HTML）中插入元素

回答

相關問題