Отображение метки, отображаемой в настройках, в качестве заголовка выбора - PullRequest
Новая
       14

Отображение метки, отображаемой в настройках, в качестве заголовка выбора

0 голосов
/ 30 января 2019

Как отобразить option.Brand.Name в качестве заголовка поля select без использования java script и изменения ng-model? 

<select ng-model="detail.BrandId" title="" class="form-control" disabled>
    <option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>

Ответы [ 6 ]

0 голосов
/ 10 февраля 2019

AngularJS и select-options

Попробуйте использовать ng-options AngularJS ngOptions директива внутри самого элемента select.Тогда вам не нужно добавлять каждый option элемент самостоятельно, используя ng-repeat.

Уточнение

Атрибут title принадлежит select -элемент и покажет, если вы наводите курсор мыши на выбранный элемент.Вы хотите, чтобы заголовок раскрыл текущий выбранный параметр ?Правильно ли я вас понял?

Как показать option.Brand.Name как title поля select

Любопытно, откуда это detail.ProductId?Выбран ли бренд по идентификатору продукта (см. Ваш код)?

ng-selected = "option.Id === detail.ProductId"

Пространство решения

Ваши требования / ограничения:

  • без использования JavaScript (возможно, потому что вы не можете изменить источники)
  • безизменение ng-модели (потому что вам нужно только BrandId по некоторым причинам базы данных)

Так как title элемента select не имеетДоступ к опциям внутри, единственный способ установить его в зависимости от текущего выбора, т.е. ваш detail.BrandId.Таким образом, title может устанавливаться только динамически (в зависимости от текущего выбора) с использованием стандартных угловых средств, таких как:

Ожидаемое поведение

Единственная переменная области действия, измененная при выборе, указывается в ng-model выбора как detail.BrandId.Это будет установлено, когда пользователь выбирает option для его свойства BrandId.Когда пользователь выбирает один из вариантов, он будет виден с меткой BrandName.После выбора это BrandName (метка опции) должно отображаться как заголовок всего элемента select.

Так что нам нужно получить от detail.BrandId ( selected ng-model) к связанным параметрам BrandName (как это должно отображаться в заголовке).

Возможное решение

Единственный способ - использовать стандартные угловые выражения / filters / array-indexing дляполучить всю опцию по выбранному detail.BrandId (модель ng)

Тогда мы можем поиск option.BrandName по этому уравнению после выбранного detail.BrandId === option.BrandId

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

app.controller('mainCtrl', function($scope){
  $scope.products = [
    {Id: 0, name: 'Watson', brandId: 1, brandName:"IBM"},
    {Id: 1, name: 'DB2', brandId: 1, brandName:"IBM"},
    {Id: 2, name: 'Windows', brandId: 2, brandName: "Microsoft"},
    {Id: 3, name: 'Office', brandId: 2, brandName: "Microsoft"}
  ];
  $scope.detail = { ProductId: 3, BrandId: null };
});


<!DOCTYPE html>

  
      
        
	  Product IdProduct NameChoose BrandBrand Id
        
        
          {{detail.ProductId}}
          {{ (products | filter: {Id: detail.ProductId})[0].name }}
          
            
        
        {{detail.BrandId}}
      
    

    
      Product is predefined. So the brand is pre-selected by product. BUT: after brand is selected, the product-details do NOT change!
    Selected detail:
      {{detail | json}}

См. Также

Для использования ng-options ,см. также пример plunkr .

0 голосов
/ 08 февраля 2019

Вы можете зарегистрировать выбранный объект опции в родительской области ng-repeat, используя в качестве псевдонима , предоставленного ng-repeat.В вашем случае вам просто нужно сделать что-то подобное: 

<select ng-model="detail.BrandId" 
        title="{{options | selectedProductFilter : detail.ProductId}}" 
        class="form-control" 
        disabled>
    <option ng-repeat="option in mainCtrl.products as options" 
            ng-selected="option.Id === detail.ProductId" 
            ng-value="option.BrandId">
        {{option.Brand.Name}}
    </option>
</select>

Объект параметров будет доступен при закрытии вашего контроллера, и вы можете отобразить заголовок с помощью пользовательского фильтра. 

angular.module("app").filter('selectedProductFilter',
    function () {
        return function (input, id) {
            if (!input) return "";
            let occurence = input.filter(function (x) {
                return x.Id == id;
            });
            return occurence.length > 0 ? occurence[0].Brand.Name: "";
        }
    }
);
0 голосов
/ 06 февраля 2019

Попробуйте использовать ng-init ,

, добавьте ng-init к вашему тегу выбора и введите значение индекса объекта, которое вы хотите выбрать по умолчанию.

например, Ваш код 

<select ng-model="detail.BrandId" title="" class="form-control" disabled>
    <option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>

добавление следующего кода (предположим, я хочу индекс 0 по индексу): 

ng-init="detail.BrandId = option[0].Brand.Name"

Это будет выглядеть так: 

<select ng-model="detail.BrandId"  ng-init="detail.BrandId = option[0].Brand.Name" title="" class="form-control" disabled>
        <option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>

или проверьте эти потоки

как использовать ng-option для установки значения по умолчанию для элемента select

Как установить значение по умолчанию в ng-варианты

0 голосов
/ 05 февраля 2019

Вот как вы могли бы достичь этого: 

(function () {
	"use strict";
	const app = angular.module("app", []);
  
	app.controller("app.AppCtrl", $scope => {
    $scope.selectedOption = null;
    $scope.optionList = [{_id: 1, label: 'Option 1'}, {_id: 2, label: 'Option 2'}];
  });
  
})();
body {
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
	<select title="{{selectedOption.label}}" class="form-control" ng-model="selectedOption">
		<option ng-repeat="option in optionList" ng-value="option"> {{option.label}}</option>
	</select>
</div>
0 голосов
/ 04 февраля 2019

заполнить ng-модель с помощью "option", а не "option.BrandId"

, тогда вы можете установить заголовок следующим образом:

mainCtrl.products ['ng-model-name'].Brand.Name

0 голосов
/ 30 января 2019

вам нужно сделать ng-change событие в вашем select и вызвать в нем функцию, которая изменит значение текста метки на имя выбранного значения.что-то вроде ниже В HTML 

ng-change="changedValue(detail.BrandId)"

В JS 

$scope.changedValue = function(item) {
    //change label name here
  }
...