Question

我有选择选项字段和输入类型字段：

<tr data-ng-repeat="person in persons">
  <td>
  <select ng-init="loadUsernames()" ng-model="person.username" ng-options="item.staff_id as item.username for item in usernames" >
    <option value="">Select Username</option> 
  </select>
  </td>            
  <td><input type="text" ng-model="person.house" required=""></td>
</tr>

我用它来显示我的选择：

<div id="choicesDisplay">
  {{ persons }}
</div>

Ans js part loadUsernames() function：

$scope.loadUsernames = function(){
  $http.get("Unity/load_username.php")  
  .then(function(data){
    $scope.usernames = data.data;
    console.log(data);
  })  
}

这是load_username.php档案：

$loadUsernames = loadUsernames();
while($row = mysqli_fetch_array($loadUsernames)){  
  $output[] = $row;  
}  
echo json_encode($output);

在数组中，我得到了这个：

0:"1001037"
1:"AARONJAMES"
2:"1"
3:"U (Red)"
$$hashKey:"object:12"
fkhouseid:"1"
hname:"U (Red)"
staff_id:"1001037"
username:"AARONJAMES"

如何在选择选项后将ng-model="person.house"设置为显示hname并将值设置为fkhouseid？

Answer 1

请查看以下代码段：jsfiddle

您需要做的是将ng-change指令添加到您的select标签，并添加一个在更改选择时将执行的功能。此方法将填充您的人物对象模型，并将house属性设置为新选择的值。如下所示：

<div ng-app="myApp" ng-controller="DemoCtrl">
<select ng-model="selectedUser.user" ng-options="user as user.username for user in usernames track by user.staff_id" ng-change="fillInput()"></select> 
<div ng-if="selectedUser.user">Full selected user info : {{ selectedUser.user | json}}</div>
<div>
    <input type="text" ng-model="person.house" required="">
</div>

并在您的控制器中：

var app = angular.module('myApp', []);

app.controller('DemoCtrl', function ($scope) {
    $scope.person = {};

$scope.usernames = [{
  fkhouseid:"1",
  hname:"U (Red)",
  staff_id:"1001037",
  username:"AARONJAMES"
}, 
{
  fkhouseid:"2",
  hname:"Different house name",
  staff_id:"1001038",
  username:"James Aron"
 }];

$scope.selectedUser = {
  user:""
};

$scope.fillInput = function(){
    $scope.person.house = $scope.selectedUser.user.hname;
};

有关ng-change的更多信息，请查看以下内容：w3schools ng-change

希望这有帮助。

选项更改时设置输入变量

1 个答案: