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>

当我点击按钮（＆＃39; ecrire＆＃39;）时，我想在ul标签中附加一个li标签

我有这样的指示，我试过这个但是它不起作用它只是在没有内容的情况下添加了一个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仅使用div并从ul移除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}}  {{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 }); }功能，所以正确关闭它。

如果要获得响应中的对象数组，则需要更改上面的代码，如

Ext.application({
    name : 'Fiddle',

    launch : function() {
        this.container = new Ext.panel.Panel({
            width: '100%',
            height: 500,
            title: 'Main',
            layout: 'border',
            renderTo: Ext.getBody()
        });

        this.container.add({
            xtype:'panel',
            region: 'east',
            width: 300,
            collapsible: true,
            collapsed: true,
            title: 'Collapsible'
        });
    }
});

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

1 个答案: