在Angular JS中添加一個在控制器上聲明的對象

我是一個angularJS初學者，我有一個問題。我想使用控制器內腳本中聲明的對象將數據添加到html中的媒體對象，但我無法找到我必須使用的指令。在Angular JS中添加一個在控制器上聲明的對象

下面是代碼：

<!DOCTYPE html> 
 
<html lang="en" ng-app="confusionApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
 
     content must come *after* these tags --> 
 
    <title>Ristorante Con Fusion: Menu</title> 
 
     <!-- Bootstrap --> 
 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
 
    <link href="styles/mystyles.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
 
      <div class="col-xs-12"> 
 
       <div class="media"> 
 
        <div class="media-left media-middle"> 
 
        <a href="#"> 
 
         <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza"> 
 
        </a> 
 
        </div> 
 
        <div class="media-body"> 
 
        <h4 class="media-heading">{{dish.name}}<span class="label label-danger">{{dish.label}}</span><span class="badge">{{dish.price | currency}}</span></h4> 
 
        <p>{{dish.description}}</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-9 col-xs-offset-1"> 
 
       <p>Put the comments here</p> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
    <script src="../bower_components/angular/angular.min.js"></script> 
 
    <script> 
 

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

 
     app.controller('dishDetailController', function() { 
 

 
      var dish = { 
 
          name:'Uthapizza', 
 
          image: 'images/uthapizza.png', 
 
          category: 'mains', 
 
          label:'Hot', 
 
          price:'4.99', 
 
          description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
 
          comments: [ 
 
           { 
 
            rating:5, 
 
            comment:"Imagine all the eatables, living in conFusion!", 
 
            author:"John Lemon", 
 
            date:"2012-10-16T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:4, 
 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
 
            author:"Paul McVites", 
 
            date:"2014-09-05T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:3, 
 
            comment:"Eat it, just eat it!", 
 
            author:"Michael Jaikishan", 
 
            date:"2015-02-13T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:4, 
 
            comment:"Ultimate, Reaching for the stars!", 
 
            author:"Ringo Starry", 
 
            date:"2013-12-02T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:2, 
 
            comment:"It's your birthday, we're gonna party!", 
 
            author:"25 Cent", 
 
            date:"2011-12-02T17:57:28.556094Z" 
 
           } 
 

 
          ] 
 
        }; 
 

 
      this.dish = dish; 
 

 
     }); 
 

 
    </script> 
 

 
</body> 
 

 
</html>

有人能幫助我嗎？我認爲這很容易，但知道我已經崩潰了！

謝謝

來源

2016-08-29 lisarko8077

你至少有2個選項。

選項1：使用$ scope。這將確保您的html保持不變

app.controller('dishDetailController', function($scope) { 
    // Your dish declaration 
    $scope.dish = dish; 
});

選項2：Javascript保持不變。在HTML中，有dishCtrl前綴的菜，因爲你使用dishDetailController as dishCtrl

例如：相反的<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">，使用

<img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}} alt="Uthapizza">

來源

2016-08-29 04:49:07 Sarathy

非常感謝！它走了。我以爲我在某個時候已經完成了它，但可能是我對代碼感到困惑。很容易。非常感謝你 – lisarko8077

是的。我能夠了解。隨着時間的推移，你將會更容易... – Sarathy

這不完全清楚你以後，但我假設你只是想知道如何更改控制器內部/更新數據，並將它反映的觀點裏面？

任何你添加到你的dish對象中的東西，都可以在你的html裏面的dish屬性裏面訪問到，這個屬性在angularjs表達式裏面。

例子：

app.controller('dishDetailController', function() { 
    this.dish = { 
     colour : 'blue' 
    }; 
});

視圖/ HTML裏面

然後：

<div ng-controller="dishDetailController"> 
    {{dish.colour}} 
</div>

如果你想使用的意見，因爲這是我看得出來，你還沒有實現的唯一的事情然而。

裏面你的HTML，你可以做這樣的事情：

<ul class="comments"> 
    <li class="comment" ng-repeat="comment in dish.comments"> 
     {{comment.comment}} - Author ({{comment.author}}) Rating : {{comment.rating}} 
    </li> 
</ul>

來源

2016-08-29 04:30:25

我做這個，但再次它不起作用。 – lisarko8077

我看到你的問題是，對不起，你需要用'dishCtrl'加上前綴＃ –

在Angular JS中添加一個在控制器上聲明的對象

回答

相關問題