How to pass the ng-repeat value or ID to my appended element? It this possible?

angularjs directive
ng-options
ng-init
compile angularjs
ng-bind
ng-change
angularjs compile dynamic html

I have ng repeat table with 5 datas from my select query and condition on my datas. I just want to get the ng-repeat value and ID and transfer it to my appended element. I'm new in Angularjs and HTML hope you guys can help. Appreciate much help.

This is my HTML:

<table class="table table-bordered kl">
   <thead>
      <tr>
         <th>ID</th>
         <th>VALUE</th>
      </tr>
   </thead>

   <tbody>
      <tr ng-repeat="d in mySelectData">
         <td>{{d.ID}}</td>
         <td>{{d.VALUE}} <p id="dataColor">Color</p> </td>
      </tr>
   </tbody>
</table>

Here's my controller:

if(interval == 2000) {
    $('#dataColor').empty();
    $('#dataColor').append('<label> the color is {{d.VALUE}}</label>'
else {
    $('#dataColor').empty();
    $('#dataColor').append('<label> the color will be changed!</label>'
}

Output should be: (in my first load)

+--------+-----------+
|   ID   |   Value   |
+--------+-----------+
|   1    |   black   |
+--------+-----------+
|   2    |   red     |
+--------+-----------+
|   3    |   blue    |
+--------+-----------+
|   4    |   white   |
+--------+-----------+
|   5    |   red     |
+--------+-----------+

(in my 2nd load or after 2secs)

+--------+-----------------------------+
|   ID   |   Value                     |
+--------+-----------------------------+
|   1    |   black  the color is black |
+--------+-----------------------------+
|   2    |   red    the color is red   |
+--------+-----------------------------+
|   3    |   blue   the color is blue  |
+--------+-----------------------------+
|   4    |   white  the color is white |
+--------+-----------------------------+
|   5    |   red    the color is red   |
+--------+-----------------------------+

finally

+--------+-------------------------------------+
|   ID   |   Value                             |
+--------+-------------------------------------+
|   1    |   black  the color will be changed! |
+--------+-------------------------------------+
|   2    |   red    the color will be changed! |
+--------+-------------------------------------+
|   3    |   blue   the color will be changed! |
+--------+-------------------------------------+
|   4    |   white  the color will be changed! |
+--------+-------------------------------------+
|   5    |   red    the color will be changed! |
+--------+-------------------------------------+

You can use [data attributes][1]

Add a data attribute to the html :

<tr ng-repeat="d in mySelectData">
    <td>{{d.ID}}</td>
    <td>{{d.VALUE}} <p id="dataColor-{{$index}}" class="js-color-change" data-color="{{d.VALUE}}">Color</p> </td>
</tr>

Retrieve values from data attributes in JS

inside you if conditions you can query using class instead if id and change the values by using data attributes

How to use 'ng-model' in AngularJS with EXAMPLES, JS are represented by the "ng-model" directive. Text Area; Input elements; Select element form Dropdown the ng-model attribute is used to bind the data in your model to the view presented to These values will be passed to select input tag in the view. AngularJS ng-repeat Directive with Example. In my code I have two nested ng-repeat attribute and I want to use first ng-repeat variable value to create the next ng-repeat variable. Here is my Code that not as I need. < div ng-repeat =" item in artType" > < select ng-model =" ddlArtType" > < option value =" " disabled selected > < /option > < option ng-repeat =" selectedArtType in

First, you need to change ID "dataColor" to class "dataColor" because ID is not duplicate.

if(interval == 2000) {
    $('.dataColor').empty();
    $('.dataColor').append('<label> the color is {{d.VALUE}}</label>'
else {
    $('.dataColor').empty();
    $('.dataColor').append('<label> the color will be changed!</label>'
}

Rendering DOM Elements With ngRepeat In AngularJS, The ngRepeat directive provides a way to render a collection of items It does this by injecting expando properties into the DOM element as well as into the individual items of your collection. The other item in the collection will be passed around by-value. Update the ID so we can see *some* change. The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row). The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.

You can try something like the below code, Also please check this plinker link for you given scenario working example.

Controller:

  $scope.mySelectData = [{
    ID: 1,
    VALUE: 'black'
  }, {
    ID: 2,
    VALUE: 'red'
  }, {
    ID: 3,
    VALUE: 'blue'
  }, {
    ID: 4,
    VALUE: 'white'
  }, {
    ID: 5,
    VALUE: 'green'
  }];
  $timeout(function(){
    angular.forEach($scope.mySelectData, function(item){
      item.MESSAGE = "the color is " + item.VALUE;
    });
  }, 2000);
  $timeout(function(){
    angular.forEach($scope.mySelectData, function(item){
      item.MESSAGE = "the color will be changed!";
    });
  }, 4000);

Template:

    <table border="1">
      <thead>
          <tr>
            <th>ID</th>
            <th>VALUE</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="d in mySelectData">
            <td>{{d.ID}}</td>
            <td>{{d.VALUE}} {{d.MESSAGE}} </td>
          </tr>
      </tbody>
    </table>

AngularJS: API: $compile, The difference resides in the return value of the factory function. to trigger changes in your component's inputs even if the actual identity of the Often it's desirable to pass data from the isolated scope via an expression to the parent scope. In general it's possible to apply more than one directive to one element, but there  Pass parameter to Angular ng-include. You don’t need that. all ng-include‘s sources have the same controller. So each view sees the same data. What is the difference between ng-init=”item = item.left” and ng-repeat=”item in item.left” ng-init="item = item.left" means – creating new instance named item that equals to item.left. In

Adding ng-model to predefined Select element adds undefined , Adding ng-model:"foo" to a prepopulated select element results in an additional "​undefined" option being You try to pass data via markup, it is not an Angular way. Just keep your data in JS model, not in HTML markup. <option ng-repeat=​"foo in foos" ng-value="foo.id">{{ foo.name }}</option> </select>  The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed. The example below makes use of this feature:

Angular-xeditable :: Edit in place for AngularJS, To make element editable via textbox just add editable-text="model.field" attribute​. <a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in <div ng-controller="Html5InputsCtrl" id="Html5InputsCtrl"> <div>Email: <a To disable a checkbox include the attribute e-ng-disabled and pass a condition. Problem in using ng-repeat variable value to the nested ng-repeat Unable to pass string array from ajax to action controller method. I am getting null object array at action method

AngularJS - Step by Logical Step, Right click your new application, add new item, and create an html file. A class attribute can have many values, so we pass an object and all values that evaluate to true However, it is possible to get hold of a persistent scope object using the For each item in the cats array, the ng-repeat directive creates a new $scope,  ngRepeat should automatically or optionally I will add my thoughts. What if the value of ng-repeat We could pass in the id of an existing element to ng-repeat