javascript - 如何在 angularjs 中动态追加 ？

Question

我有一个像这样的html

<ul class="list">  
    <div ng-repeat="avis in avisData">  
        <li id="li"> 
            <a class="item item-thumbnail-left" href=""><img src=data:image/jpeg;base64,{{avis.imageClient}} style="width: 100px; height: 100px;"><h3>{{avis.avis.idconsommateur.nom}}&nbsp;&nbsp;{{avis.avis.idconsommateur.prenom}}</h3><p>{{avis.avis.commentaire}}</p></a>
        </li>
        <br>
    </div> 
</ul>

<button class="button button-calm " style="float:right;height: 10px;" ng-controller="AvisEventController" ng-click="ecrireAvis()">
    <div style="float: right;width:80%;">Ecrire</div>
    <div style="margin-top:0px;margin-right:10px;float:left;">

        <i class="fa fa-pencil fa-lg" style="padding-right: 10px;margin-top: -28px;"></i>

    </div>
</button>

当我点击按钮('ecrire')时，我想在 ul 标签中附加一个 li 标签

我有这样的指令，我已经尝试过，但它不起作用，只需在 ul 中添加一个没有内容的 li :

$scope.ecrireAvis=function(){

    $scope.consommateur=angular.fromJson($localStorage.UserConsConnect);
    $scope.evenement=angular.fromJson($localStorage.event);
    var objAvis =new Object();
    objAvis.commentaire=$scope.commentaire;
    objAvis.idconsommateur= $scope.consommateur;
    objAvis.idevenement=$scope.evenement;
    alert($localStorage.star);
    objAvis.note=$localStorage.star;

    $http.post('http://127.0.0.1:8080/elodieService/avis/',objAvis).success(function(response, status, headers, config){
        alert("SUCCESS ajout dans la table Avis !!");
        $scope.avisData.push({commentaire:objAvis.commentaire});
    }).error(function(err, status, headers, config){
    //process error scenario.
    }); 

我的服务网站:

{
avis: {
commentaire: "aaaaaaaa",
date: null,
idAvis: 8,
idconsommateur: {},
idevenement: {},
imageJson: null,
note: 3
},
imageAvis: null,
imageClient: "/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpL
},

Answer 1

问题是因为您没有绑定(bind) avisData 中所需的所有内容，例如 imageClient、idconsommateur 并且不使用 avis.avis 仅使用 avis 并从 ul 中删除 div，因为 ul 必须包含 li 喜欢

<ul class="list">  
    <li ng-repeat="avis in avisData"> 
        <a class="item item-thumbnail-left" href=""><img src=data:image/jpeg;base64,{{avis.imageClient}} style="width: 100px; height: 100px;"><h3>{{avis.idconsommateur.nom}}&nbsp;&nbsp;{{avis.idconsommateur.prenom}}</h3><p>{{avis.commentaire}}</p></a>
    </li>
</ul>

在脚本中推送对象，

$scope.avisData=[]; //define avisData as array
// http request here
$scope.avisData.push({
   // now commentaire,idconsommateur and imageClient can be directly accessible
   commentaire:objAvis.commentaire,
   idconsommateur:objAvis.idconsommateur,
   imageClient:someOtherObject
});

此外，我发现您没有关闭 $scope.ecrireAvis 函数，因此请正确关闭它。

如果您收到响应中的对象数组，那么您需要更改上面的代码，例如，

for(var i=0,l=response.length;i<l;i++){
    $scope.avisData.push({
       // now commentaire,idconsommateur and imageClient can be directly accessible
       commentaire:response[i].avis.commentaire,
       idconsommateur:response[i].avis.idconsommateur,
       imageClient:response[i].imageClient
    });
}