如何在angularjs中动态附加<li>？

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'）时，我想将一个 li 标签附加到 ul 标签中

我有这样的指令，我试过了，但它不起作用它只是在 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

问题是因为您没有绑定 avisData 中所需的所有内容，例如 imageClient,idconsommateur 并且不要使用 avis.avis 仅使用 avis 并从 ul 中删除 div因为ul必须包含lilike

<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
    });
}