次のselect要素が与えられます
<select ng-options="size.code as size.name for size in sizes "
ng-model="item.size.code"
ng-change="update(MAGIC_THING)">
</select>
MAGIC_THINGを現在選択されているサイズと等しくする方法はありますか？そのため、コントローラーにアクセスできますsize.nameかsize.code？
size.codeは、アプリの他の多くの部分（画像のURLなど）に影響しますが、のng-modelitem.size.codeが更新item.size.nameされると、ユーザー向けのものも更新する必要があります。これを行う正しい方法は、変更イベントをキャプチャしてコントローラー内で値を設定することだと思いますが、適切な値を取得するために更新に何を渡すことができるかわかりません。
これが完全に間違った方法である場合、私は正しい方法を知りたいです。
ng-modelをitem.size.codeに設定する代わりに、sizeに設定するのはどうですか。
<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>
次に、update()メソッドで、$scope.itemが現在選択されているアイテムに設定されます。
そして、必要なコードが何であれitem.size.code、を介してそのプロパティを取得できます$scope.item.code。
フィドル。
コメントの詳細情報に基づいて更新します。
次に、選択したng-modelに他の$scopeプロパティを使用します。
<select ng-options="size as size.name for size in sizes"
ng-model="selectedItem" ng-change="update()"></select>
コントローラ：
$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
次のコードを使用して、選択した値を直接取得することもできます
<select ng-options='t.name for t in templates'
ng-change='selectedTemplate(t.url)'></select>
script.js
$scope.selectedTemplate = function(pTemplate) {
//Your logic
alert('Template Url is : '+pTemplate);
}
あなたもこれを試してみてください：
<select ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items"
ng-selected="selectedItem == item.Id" value="{{item.Id}}">
{{item.Name}}
</option>
</select>
Divyesh Rupawalaの答えが機能しない（現在のアイテムをパラメーターとして渡す）場合はonChanged()、このプランカーの関数を参照してください。使用していthisます：
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option>
</select>
//Javascript
$scope.update = function () {
$scope.myItem;
alert('Hello');
}<!--HTML-->
<div class="form-group">
<select name="name"
id="id"
ng-model="myItem"
ng-options="size as size.name for size in sizes"
class="form-control"
ng-change="update()"
multiple
required>
</select>
</div>書きたい場合は、名前、ID、クラス、複数、必須、このように書くことができます。
これはあなたにいくつかのアイデアを与えるかもしれません
.NET C＃ビューモデル
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
.NET C＃WebApiコントローラー
public class DepartmentController : BaseApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var sms = Ctx.Departments;
var vms = new List<DepartmentViewModel>();
foreach (var sm in sms)
{
var vm = new DepartmentViewModel()
{
Id = sm.Id,
Name = sm.DepartmentName
};
vms.Add(vm);
}
return Request.CreateResponse(HttpStatusCode.OK, vms);
}
}
Angular Controller：
$http.get('/api/department').then(
function (response) {
$scope.departments = response.data;
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);
$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
function (response) {
$scope.request = response.data;
$scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
},
function (response) {
toaster.pop('error', "Error", "An unexpected error occurred.");
}
);
Angularテンプレート：
<div class="form-group">
<label>Department</label>
<div class="left-inner-addon">
<i class="glyphicon glyphicon-hand-up"></i>
<select ng-model="travelerDepartment"
ng-options="department.Name for department in departments track by department.Id"
ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
オブジェクトを正しく比較できるように、「追跡」を使用する必要があります。それ以外の場合、Angularはオブジェクトを比較するネイティブjsの方法を使用します。
したがって、サンプルコードは次のように変更されます-
<select ng-options="size.code as size.name
for size in sizes track by size.code"
ng-model="item.size.code"></select>
AngularJSのフィルターは私のためにうまくいきました。
code/idが一意であると仮定すると、AngularJSを使用してその特定のオブジェクトを除外しfilter、選択したオブジェクトのプロパティを操作できます。上記の例を検討します。
<select ng-options="size.code as size.name for size in sizes"
ng-model="item.size.code"
ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>
<!-- OUTSIDE THE SELECT BOX -->
<h1 ng-repeat="size in sizes | filter:search:true"
ng-init="search.code = item.size.code">
{{size.name}}
</h1>
さて、これには3つの重要な側面があります。
ng-init="search.code = item.size.code"-ボックスのh1外側の要素を初期化するときに、フィルタークエリを選択したオプションに設定します。select
ng-change="update(MAGIC_THING); search.code = item.size.code"-選択入力を変更すると、もう1行実行され、「検索」クエリが現在選択されているに設定されitem.size.codeます。
filter:search:true-厳密な一致trueを有効にするには、フィルターに渡します。
それでおしまい。size.codeがuniqueIDの場合h1、テキストが。の要素は1つだけになりますsize.name。
私は自分のプロジェクトでこれをテストしましたが、機能します。
幸運を
これは、角度選択オプションリスト（IDまたはテキスト以外）から値を取得するための最もクリーンな方法です。あなたのページにこのような製品選択があると仮定します：
<select ng-model="data.ProductId"
ng-options="product.Id as product.Name for product in productsList"
ng-change="onSelectChange()">
</select>
次に、コントローラーでコールバック関数を次のように設定します。
$scope.onSelectChange = function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}
簡単な説明： ng-changeイベントはselect内のオプション項目を認識しないため、ngModelを使用して、コントローラーにロードされたオプションリストから選択された項目を除外しています。
さらに、ngModelが実際に更新される前にイベントが発生するため、望ましくない結果が生じる可能性があります。したがって、タイムアウトを追加するのがより良い方法です。
$scope.onSelectChange = function () {
$timeout(function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}, 100);
};