考虑我有一个对象列表，如 -
var configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
我使用以下内容搜索配置列表，并将选定的配置绑定到另一个名为changed_config的变量。
<table style="width:900px;">
<tr>
<th style="width:500px; margin:50px">Config Name</th>
<th style="width:150px;">Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.id" list="names">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" ng-value="option.name"> {{option.name}}
</option>
</datalist>
<td>
<input type="text" class="form-control" ng-model="changed_config.value">
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()"
class="btn btn-primary">Add Config
</button>
</div>
控制器代码（不是完整的代码，只是相关的代码片段）：
var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
}
目前，代码显示并将所选配置的name绑定到changed_config变量。但我需要将id绑定到changed_config变量并将name显示在html中。
如果我将<option>更改为使用id，则会显示id。
如何将一个属性绑定到变量但在html中显示另一个属性？
这是您需要的解决方案，
程序：
- 当
option是来自selected的datalist时我正在检查这个变化- 通过添加
input的datalist观察到这种变化- 在那个
input changei，e当选择选项时，我将该id分配给相应changed_config的id键- 这是在第二个文本框中显示的内容
- 它适用于
dynamic
// Code goes here
function cntryController($scope) {
$scope.LoadSessionData=function(val)
{
console.log(val);
};
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
$scope.test = function(data, index){
console.log(data)
var newArray = $scope.configs.filter(function (config) {
return config.name == data;
});
console.log(newArray)
if(newArray.length){
var new_changed_config = $scope.changed_configs[index];
new_changed_config.id = newArray[0].id;
}
}
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="" ng-controller="cntryController">
<table cellspacing="10" cellpadding="10">
<tr>
<th>Config Name</th>
<th>Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.name" list="names" ng-change="test(changed_config.name, $index)">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" value={{option.name}}>{{option.name}}
</option>
</datalist>
</td>
<td>
<input type="text" class="form-control" ng-model="changed_config.id"/>
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()" class="btn btn-primary">Add Config</button>
</div>
</div>
</html>请运行上面的代码段