У меня есть multi-select, который я сделал с angular-ui.Я хочу добавить ввод, чтобы пользователь мог изменять имена ключей JSON, например, если добавляемый пользователем API не имеет «name», вместо него используется «firstName» в качестве «имени ключа», приложение изменяет это иможет работать нормально.как я могу получить этот результат?ценю любую помощь.мой код здесь
, что я действительно хочу, так это: я должен добавить этот множественный выбор как widget к программному обеспечению с именем bonita studio, и у него должна быть опция, которую пользовательМожно выбрать любой API, который хотите использовать и должен иметь поле ввода, в котором пользователь будет выбирать, какой из ключевых идентификаторов API будет перебирать.например, если вместо имени пользователь хочет перебрать электронную почту, которую он / она должен сделать.Я надеюсь, что этого объяснения достаточно
"use strict";
var app = angular.module("myApp", ['ui.select', 'ngSanitize']);
app.controller("myCtrl", function($scope, $http) {
$scope.headers = "";
var counter = 0;
var chunks = 5;
$scope.datas = [];
$scope.getData = function getData() {
return $http({
method: "GET",
url: "data.json"
})
.then(function onSuccess(response) {
for (let i = 0; i < response.data.length; i++) {
$scope.datas.push(response.data[i]);
}
//counter += chunks;
})
.catch(function onError(response) {
console.log(response.status);
});
}
/*$scope.loadMore = function () {
$http({
method: "GET",
url: "data.json"
})
.then(function loadMoreSuccess(response) {
for (let i = counter; i < (counter + chunks); i++) {
$scope.datas.push(response.data[i]);
}
counter += chunks;
})
.catch(function onError(response) {
console.log(response.status);
});
};*/
$scope.selected = {
value: $scope.datas[0]
};
});
#widgetContainer {
width: 100%;
}
ul li {
list-style: none;
text-align: center;
}
ul {
height: 120px;
overflow-y: auto;
}
#loadMore {
text-align: center;
color: #aaa;
background: #ddd;
cursor: pointer;
}
#category {
text-align: center;
background: #ddd;
}
#listContainer {
width: 20%;
}
span {
cursor: pointer;
}
h4 {
background: #ddd;
color: #aaa;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script/lib/angular/angular.js"></script>
<script src="https://code.angularjs.org/1.6.10/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css">
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body ng-controller="myCtrl">
<div class="container">
<input type="text" ng-model="headers">
<ui-select multiple spinner-enabled="true" close-on-select="false" ng-model="selected.value">
<ui-select-no-choice>
couldn't find anything...
</ui-select-no-choice>
<ui-select-match placeholder="Select country...">
<span>{{$item.name}}</span>
</ui-select-match>
<ui-select-choices group-by="'category'" repeat="data in (datas | filter: $select.search) track by $index" refresh="getData($select.search)" refresh-delay="0">
<span>{{data.name}}</span>
</ui-select-choices>
</ui-select>
</div>
<script src="script/script.js"></script>
</body>
</html>