gpt4 book ai didi

javascript - ng-select 下拉 ajax/对象映射

转载 作者:行者123 更新时间:2023-11-28 01:14:19 27 4
gpt4 key购买 nike

使用 Angular ng-select,寻找最佳实践/建议,将选择下拉列表与基于范围内对象的属性选择的所选选项链接起来。

  1. Controller 持有一个物体(动物),其中有一只选定的猫
  2. 猫(选项)是使用任何“promise”类型的 Angular 服务(演示中的 $http)从 Ajax 调用加载的
  3. 加载页面时,我希望所选的猫与animal.cat 相同(希望看到双向映射的最简单路径)

这是骗子:http://plnkr.co/edit/bMj7678djgPoJbiTRceG?p=preview

服务/ Controller JS。

selectDemo = angular.module('selectDemo',[]);

selectDemo.factory("cat", ["$http", "$log", function($http, $log){
return {
query: function(runAfter){
$log.debug("Getting cats from service");
return $http.get('getCats.json');
}
}
}]);

selectDemo.controller('SelectDemoCtrl', ["$scope", "$log", "cat", function($scope, $log, Cat){
$scope.animal = {type: "Mammal", cat: {"id": 2, "name": "Simon", "breed": "Persian"}};

Cat.query().then(function(data){
cats = data.data;
$scope.cats = cats;
});
}]);

HTML:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body ng-app="selectDemo" ng-controller="SelectDemoCtrl">
<h1>AngularJS Select Dropdown</h1>
<div id="data"></div>
<form role="form">
<select data-ng-model="animal.cat" data-ng-options="cat.name for cat in cats">
<option value="">Select a cat</option>
</select>
</form>
<p>You selected: {{ animal.cat }}</p>
</body>

</html>

JSON 响应对象:

[{"id": 1, "name": "Garfield", "breed": "Tabby"},
{"id": 2, "name": "Simon", "breed": "Persian"},
{"id": 3, "name": "Twix", "breed": "Mixed"}]

最佳答案

这是一个更新的 plunk:

http://plnkr.co/edit/KTJt9602eD5Pgr1y7c9w?p=preview

这里的问题是,从 ng-options 中选择的对象需要引用等于ng-model 引用的对象,因此需要在数组中查找对象。

关于javascript - ng-select 下拉 ajax/对象映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24024670/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com