Home / Questions / 33828
Accepted
vdjkelly
Asked: 2020-11-16 02:58:36 +0800 CST 2020-11-16 02:58:36 +0800 CST

Loading element sent by ng-click from a textarea via an ID

  • 772

What I want is that when I click on the button it sends me the comment and loads it in its respective id something like in Jquery that loads said elements by means of an ID$("#commentload" + id).append(template);

I leave my AngularJS code (Angular 1) since I have tried to do it in several ways and I have not yet been successful in what I want

this.sendComments = (stream_id) => {
    let data = {
        stream_id: stream_id,
        body: this.commentBody
    }
    this.CommentService.getComments(data).then((response) => {
        this.comments.push(response.data);
        angular.element('').find(...)
    }).catch(this.failedComment.bind(this));

    this.commentBody = "";
}


<div flex-gt-sm="100" flex>
    <md-divider ></md-divider>
    <md-list flex ng-repeat="cmt in streams['comments']">
        <md-list-item class="md-3-line" ng-repeat="comentarios in cmt">
            <img ng-src="{{comentarios['users']['data']['user_avatar_mini']}}" class="md-avatar" alt="{{comentarios['users']['data']['user_name']}}" />
             <div class="md-list-item-text" layout="column">
               <h3>{{comentarios['users']['data']['user_name']}} - {{comentarios['comment_created_at']}}</h3>
                 <p>{{comentarios['comment_body']}}</p>
             </div>
        <md-divider></md-divider>
        </md-list-item>
     </md-list>



    <md-list flex>
    <!--Aqui cargo los comentarios enviados desde el input-->
        <md-list-item id="stream-{{streams.stream_id}}" class="md-3-line" ng-repeat="comments in stream['comments']">
            <img ng-src="{{comments[0]['users']['data']['user_avatar_mini']}}" class="md-avatar" alt="{{comments[0]['data']['users']['data']['user_name']}}" />
            <div class="md-list-item-text" layout="column">
              <h3>{{comments[0]['users']['data']['user_name']}} - {{comments[0]['comment_created_at']}}</h3>
              <p>{{comments[0]['comment_body']}}</p>
            </div>
            <md-divider></md-divider>
        </md-list-item>
      </md-list>
</div>

<md-card-actions layout="row" layout-align="end center">
    <md-input-container md-no-float class="md-block" flex>
        <label>Comenta!</label>
        <input type="text" data-ng-model="stream.commentBody">
        <md-icon md-font-set="md" style="display:inline-block;" ng-click="stream.sendComments(streams.stream_id)">send</md-icon><!--Cuando haga click cargue el comentario en el id especifico del stream-->
    </md-input-container>
</md-card-actions>

This id="stream-{{streams.stream_id}}"is where I want to load the comment sent according to the loader streams in a list, if there are 30 with different IDs and different comments, load the comment to its corresponding id

angularjs

2 Answers

  1. Best Answer

    In my personal opinion, I don't work with idwhen I work with angularjs, rather with ng-modeltherefore if you want data to be loaded when clicking on a button, if it is a comment array:

    <input type="text" ng-model="comentario" placeholder="ingrese comentario"/>
<button ng-click="actualizar()">Comentar</button>
<div ng-repeat="comentario in comentarios">
  <p>{{comentario}}</p>
</div>

$scope.actualizar = function(){
    $scope.comentarios.push($scope.comentario);
}

    When working with ng-modelyou have the advantage that it is not necessary to make a appendof your element html, also the values ​​when doing pushfrom the controller are updated immediately in the view.

    • 1

  2. Thank you, your example helped me a lot.

    this.sendComments = (stream_id, streams) => {
            let data = {
                stream_id: stream_id,
                body: this.comentario
            }
            this.CommentService.getComments(data).then((response) => {
                streams.comments.data.push(response.data);
            }).catch(this.failedComment.bind(this));

            this.comentario = "";

        }


<div flex-gt-sm="100" flex>
                  <md-divider ></md-divider>
                  <md-list flex ng-repeat="comentarios in streams.comments.data">
                      <md-list-item class="md-3-line">
                          <img ng-src="{{comentarios['users']['data']['user_avatar_mini']}}" class="md-avatar" alt="{{comentarios['users']['data']['user_name']}}" />
                          <div class="md-list-item-text" layout="column">
                            <h3>{{comentarios['users']['data']['user_name']}} - {{comentarios['comment_created_at']}}</h3>
                              <p>{{comentarios['comment_body']}}</p>
                          </div>
                        <md-divider></md-divider>
                      </md-list-item>

                 </md-list>
          </div>

          <md-card-actions layout="row" layout-align="end center">
              <md-input-container md-no-float class="md-block" flex>
                  <label>Comenta!</label>
                  <input type="text" data-ng-model="stream.comentario">
                  <md-icon md-font-set="md" style="display:inline-block;" ng-click="stream.sendComments(streams.stream_id, streams)">send</md-icon>
              </md-input-container>

          </md-card-actions>

    I leave the code for those who serve as an example

    • 0