使用angular js单击applyAll按钮时，更改所选复选框的文本区域值

时间：2017-07-04 09:40:18

标签： angularjs

我需要显示所选复选框的块注释以及相应的注释字段（即，如果我们选择1,3个复选框并键入注释，当我们单击“应用所有”按钮时，它应该替换1的注释字段， 3如果我们在更改注释文本并单击“应用所有”按钮时再次选择2,4，则应该替换2,4的注释字段，只有它不应该用新的1,2,3,4替换评论）任何人都可以帮助我吗？

＆＃13;
＆＃13; 
var app = angular.module('demo', []);
app.controller("profileController", function($scope) {

 $scope.personalDetails = [
            {
               'fname':'Muhammed',
                'lname':'Shanid',
                'email':'shanid@shanid.com',
                'check' : 'Y',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'John',
                'lname':'Abraham',
                'email':'john@gmail.com',
                'check' : 'N',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'raj',
                'lname':'komali',
                'email':'raj@gmail.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'roy@roy.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            }];
            
 $scope.applyCmtsAll = function(personBlckCmts) {
  angular.forEach($scope.personalDetails, function(value) {
   if (value.selected == true) {
    console.log("value " + value);
    value.selectedDpn.selectVal = "Yes";
    value.indivalCmts = personBlckCmts;
    //$scope.indivalCmts==personBlckCmts;
    return;
   }
  });
 }
   
});
＆＃13; 
.selected {
		   text-decoration: line-through;

		}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body ng-app="demo" ng-controller="profileController">
<div class="">
    <textarea ng-model="personBlckCmts"></textarea>
    <button  class="btn btn-default btn-sm" ng-click="applyCmtsAll(personBlckCmts)">Apply All</button>
 </div>
<table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th></th>
     <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Email</th>
     <th>Yes/No</th>
     <th>Comment</th>
   </tr>
  </thead>                         
      <tbody>
        <tr ng-repeat="personalDetail in personalDetails" ng-class="{'selected':personalDetail.selected}">
        <td>{{$index}}</td>
		<td>
		 <input type="checkbox" ng-click="setClickedRow($index)" ng-model="personalDetail.selected" ng-disabled="personalDetail.selected"/>
		</td>
		 <td>
		   <span>{{personalDetail.fname}}</span>
		</td>   
		<td>
		   <span>{{personalDetail.lname}}</span>
		</td> 
		 <td>
		   <span>{{personalDetail.email}}</span>
		</td> 
									  
          <td>
             <select  ng-init="personalDetail.selectedDpn= personalDetail.checkxDrpn[1]" ng-options="value as value.selectVal for value in personalDetail.checkxDrpn track by value.key"
        ng-model="personalDetail.selectedDpn" ></select>
       </td>
	   <td>
		<textarea ng-model="indivalCmts" ng-disabled="personalDetail.selected">
		  
		</textarea>
	   </td>
        </tr>
      </tbody>
      </table>
 
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我在这里更新了您的源代码。可能会有助于解决您的问题。

var app = angular.module('demo', []);
app.controller("profileController", function($scope) {

 $scope.personalDetails = [
            {
               'fname':'Muhammed',
                'lname':'Shanid',
                'email':'shanid@shanid.com',
                'check' : 'Y',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'John',
                'lname':'Abraham',
                'email':'john@gmail.com',
                'check' : 'N',
                'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'raj',
                'lname':'komali',
                'email':'raj@gmail.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            },
            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'roy@roy.com',
                'check' : 'N',
                 'checkxDrpn' : [
                  { key: 'Y',selectVal: "Yes"},
                  { key: 'N',selectVal: "No"}
                ],
                'indivalCmts' : ''
            }];
            
 $scope.applyCmtsAll = function(personBlckCmts) {
  angular.forEach($scope.personalDetails, function(value) {
   if (value.selected == true) {
    
    value.selectedDpn.selectVal = "Yes";
    value.indivalCmts = personBlckCmts; 
    value.selected = false;
   }
  });
  $scope.personBlckCmts='';
 }
   
});
.selected {
		   text-decoration: line-through;

		}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body ng-app="demo" ng-controller="profileController">
<div class="">
    <textarea ng-model="personBlckCmts"></textarea>
    <button  class="btn btn-default btn-sm" ng-click="applyCmtsAll(personBlckCmts)">Apply All</button>
 </div>
<table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th></th>
     <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Email</th>
     <th>Yes/No</th>
     <th>Comment</th>
   </tr>
  </thead>                         
      <tbody>
        <tr ng-repeat="personalDetail in personalDetails" ng-class="{'selected':personalDetail.selected}">
        <td>{{$index}}</td>
		<td>
		 <input type="checkbox" ng-click="setClickedRow($index)" ng-model="personalDetail.selected" ng-disabled="personalDetail.selected"/>
		</td>
		 <td>
		   <span>{{personalDetail.fname}}</span>
		</td>   
		<td>
		   <span>{{personalDetail.lname}}</span>
		</td> 
		 <td>
		   <span>{{personalDetail.email}}</span>
		</td> 
									  
          <td>
             <select  ng-init="personalDetail.selectedDpn= personalDetail.checkxDrpn[1]" ng-options="value as value.selectVal for value in personalDetail.checkxDrpn track by value.key"
        ng-model="personalDetail.selectedDpn" ></select>
       </td>
	   <td>
		<textarea ng-model="personalDetail.indivalCmts" ng-disabled="personalDetail.selected">
		  
		</textarea>
	   </td>
        </tr>
      </tbody>
      </table>
 
</body>
</html>

相关问题
最新问题