How can i pass textbox value to ng-repeat in angularjs?

Question

1) I have Industry dropdown with code(textbox) .Based on Industry drop down value code will change.

2) I have dynamic add/delete for Movie Name and Name of Director

here we have 3 columns in table Movie Name ,Director ,Industry Code

we can add Movie Name and Name of Director dynamically but Industry Code we need get from above drop down .

when ever we change Industry field we will get one code(if user select tamil we will get code TN). based on Industry dropdown we need to update all Industry Code rows(this column avilable in table)

Demo

<div data-ng-app data-ng-controller="myCtrl">
  <label>Industry</label>
  <select ng-model="data" ng-options="data as data.name for data in datas">
  </select>
   <label>code</label>
   <input type="text" ng-model="data.code" disabled/>


<ul>
            <li>Movie Name</li>
            <li><input type="text" ng-model="name" /></li>
        </ul>
        <ul>
            <li>Name of Director</li>
            <li><input type="text" ng-model="director" /></li>
        </ul>
        <ul>
            <li></li><li><button ng-click="addRow()"> Add Row </button></li>
        </ul>
         <table> 
            <tr>
                <th>NO</th>
                    <th>Movie Name</th>
                        <th>Director</th>
                        <th>Industry Code</th>
            </tr>

            <tr ng-repeat="movies in movieArray">
                <td><label>{{$index + 1}}</label></td>
                <td><label>{{movies.name}}</label></td>
                <td><label>{{movies.director}}</label></td>
                <td><label>{{movies.code}}</label></td>
                <td><input type="checkbox" ng-model="movies.Remove"/></td>
            </tr>
        </table>

        <div>
            <button ng-click="submit()">Submit Data</button>   
                <button ng-click="removeRow()">Remove Row</button>
        </div>

        <div id="display" style="padding:10px 0;">{{display}}</div>

controller:

function myCtrl($scope){
 $scope.datas = [{
    "id": 3,
    "name": "Tamil",
    "code": "TN"
  }, {
    "id": 4,
    "name": "English",
    "code": "EN"
  },
  {
    "id": 5,
    "name": "Telugu",
    "code": "TE"
  }]


     $scope.movieArray =
        [
            { 'name': 'Total Eclipse', 'director': 'Agniezka Hollan' ,'code': 'TN'},
            { 'name': 'My Left Foot', 'director': 'Jim Sheridan','code': 'TN' },
            { 'name': 'Forest Gump', 'director': 'Robert Zemeckis','code': 'TN' }
        ];

        // GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
        $scope.addRow = function () {
            if ($scope.name != undefined && $scope.director != undefined) {
                var movie = [];
                movie.name = $scope.name;
                movie.director = $scope.director;

                $scope.movieArray.push(movie);

                // CLEAR TEXTBOX.
                $scope.name = null;
                $scope.director = null;
            }
        };

        // REMOVE SELECTED ROW(s) FROM TABLE.
        $scope.removeRow = function () {
            var arrMovie = [];
            angular.forEach($scope.movieArray, function (value) {
                if (!value.Remove) {
                    arrMovie.push(value);
                }
            });
            $scope.movieArray = arrMovie;
        };

        // FINALLY SUBMIT THE DATA.
        $scope.submit = function () {
            var arrMovie = [];
            angular.forEach($scope.movieArray, function (value) {
                arrMovie.push('Name:' + value.name + ', Director:' + value.director);
            });
            $scope.display = arrMovie;
        };
}

This can't work. var movie = []; I suspect you mean var movie = {} — JackDev
– JackDev, Commented Mar 2, 2018 at 10:17
So you need to push the industry code to table along with name and director when adding new entry or do you need to update the entire table's industry code to match the selection? — Hussain Mohd
– Hussain Mohd, Commented Mar 2, 2018 at 10:32
push the industry code to table along with name and director if already name and director and if i change Industry in dropdown that time also we need to update all the rows — its me
– its me, Commented Mar 2, 2018 at 10:37
i change Industry in dropdown that time we need to update all the rows of Industry Code remaining should be same(only we need to change Industry Code) @HussainMohd . now if i change Industry in dropdown i am not getting any table data... — its me
– its me, Commented Mar 2, 2018 at 10:53

Hussain Mohd · Accepted Answer · 2018-03-02 11:02:10Z

1

I think adding an ng-change will do the trick check this http://jsfiddle.net/nymdjf5f/5/

 $scope.changeindustry=function()
        {
        for(var a in $scope.movieArray)
        {
        $scope.movieArray[a].code=$scope.data.code;
        }

        };

answered Mar 2, 2018 at 11:02

Hussain Mohd

1367 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2018-03-02 11:15:57Z

function myCtrl($scope) {
  $scope.datas = [{
      "id": 3,
      "name": "Tamil",
      "code": "TN"
    }, {
      "id": 4,
      "name": "English",
      "code": "EN"
    },
    {
      "id": 5,
      "name": "Telugu",
      "code": "TE"
    }
  ]

  $scope.change_drop = function(data) {

  }
  $scope.movieArray = [{
      'name': 'Total Eclipse',
      'director': 'Agniezka Hollan',
      'code': 'TN'
    },
    {
      'name': 'My Left Foot',
      'director': 'Jim Sheridan',
      'code': 'TN'
    },
    {
      'name': 'Forest Gump',
      'director': 'Robert Zemeckis',
      'code': 'TN'
    }
  ];
  $scope.selected_row = {
    'val': ''
  }
  $scope.change_drop = function(){
       $scope.movieArray.forEach(function(val, i) {
         val['code']      = $scope.selected_row['val']['code']
      }) 
   }
  // GET VALUES FROM INPUT BOXES AND ADD A NEW ROW TO THE TABLE.
  $scope.addRow = function() {
    if ($scope.name != undefined && $scope.director != undefined && $scope.selected_row['val']['code']) {
      var find = 0
      $scope.movieArray.forEach(function(val, i) {
       
        if (val['name'] == $scope.name && val['director'] == $scope.director) {
          val['code'] = $scope.selected_row['val']['code']
          find = 1;
        }
         val['code']      = $scope.selected_row['val']['code']
      })
      if (find) {
        $scope.name = null;
        $scope.director = null;
        $scope.selected_row = {
          'val': ''
        }
        return
      }
      var movie = {};
      movie.name = $scope.name;
      movie.director = $scope.director;
      movie.code = $scope.selected_row['val']['code']
      movie.industry = $scope.selected_row['val']['name']
      $scope.movieArray.push(movie);

      // CLEAR TEXTBOX.
      $scope.name = null;
      $scope.director = null;
      $scope.selected_row = {
        'val': ''
      }
    }
  };

  // REMOVE SELECTED ROW(s) FROM TABLE.
  $scope.removeRow = function() {
    var arrMovie = [];
    angular.forEach($scope.movieArray, function(value) {
      if (!value.Remove) {
        arrMovie.push(value);
      }
    });
    $scope.movieArray = arrMovie;
  };

  // FINALLY SUBMIT THE DATA.
  $scope.submit = function() {
    var arrMovie = [];
    angular.forEach($scope.movieArray, function(value) {
      arrMovie.push('Name:' + value.name + ', Director:' + value.director+'code:'+value.code);
    });
    $scope.display = arrMovie;
  };
}

div {
  font: 15px Verdana;
  width: 450px;
}

ul {
  padding: 0;
  margin: 2px 5px;
  list-style: none;
  border: 0;
  float: left;
  width: 100%;
}

li {
  width: 50%;
  float: left;
  display: inline-block;
}

table,
input {
  text-align: left;
  font: 13px Verdana;
}

table,
td,
th {
  margin: 10px 0;
  padding: 2px 10px;
}

td,
th {
  border: solid 1px #CCC;
}

button {
  font: 13px Verdana;
  padding: 3px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app data-ng-controller="myCtrl">
  <label>Industry</label>
  <select ng-model="selected_row['val']" ng-options="data as data.name for data in datas" ng-change="change_drop(data)">
  </select>
  <label>code</label>
  <input type="text" ng-model="selected_row['val'].code" disabled/>


  <ul>
    <li>Movie Name</li>
    <li><input type="text" ng-model="name" /></li>
  </ul>
  <ul>
    <li>Name of Director</li>
    <li><input type="text" ng-model="director" /></li>
  </ul>
  <ul>
    <li></li>
    <li><button ng-click="addRow()"> Add Row </button></li>
  </ul>
  <table>
    <tr>
      <th>NO</th>
      <th>Movie Name</th>
      <th>Director</th>
      <th>Industry Code</th>
    </tr>

    <tr ng-repeat="movies in movieArray">
      <td><label>{{$index + 1}}</label></td>
      <td><label>{{movies.name}}</label></td>
      <td><label>{{movies.director}}</label></td>
      <td><label>{{movies.code}}</label></td>
      <td><input type="checkbox" ng-model="movies.Remove" /></td>
    </tr>
  </table>

  <div>
    <button ng-click="submit()">Submit Data</button>
    <button ng-click="removeRow()">Remove Row</button>
  </div>

  <div id="display" style="padding:10px 0;">{{display}}</div>

Collectives™ on Stack Overflow

How can i pass textbox value to ng-repeat in angularjs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related