Question

1）我有行业下拉代码（文本框）。基于行业下拉值代码将会改变。

2）我有电影名称和导演名称的动态添加/删除

这里我们在表格中有3列电影名称，导演，行业代码

我们可以动态添加导演的电影名称和名称，但我们需要从上面的行业代码下载。

当我们更改Industry字段时，我们将获得一个代码（如果用户选择tamil，我们将获得代码TN）。根据行业下拉列表，我们需要更新所有行业代码行（此表格可在表格中找到）

<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>

控制器：

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为添加ng-change会对此进行检查 http://jsfiddle.net/nymdjf5f/5/

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

        };

如何将文本框值传递给angularjs中的ng-repeat？

2 个答案: