Как установить свойство выбранного элемента ng-options с ng-model

-1

Я пытаюсь установить свойство выбранного элемента в наборе ng-опций в html select, указав на него ng-model, по существу, I необходимо определить массив какКак установить свойство выбранного элемента ng-options с ng-model

данные = [{вариант: "мяу", ответ: ""}, {варианта: "гав", ответ: ""}]

И есть два выбора, показывающих варианты «мяу» и «вуф». Если для первого выбора установлено значение «woof», тогда данные должны выглядеть так:

[{option: "meow", answer: "woof"}, {option: "woof", answer: ""}]

идея в том, что ты отображать

кошка идет [мяу/гав] собака идет [мяу/гав].

Я попытался

<select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required></select>

но не кости ... нет, кажется, проблема обзорное с пунктом (или, возможно, значение/ссылка) проблемы, но я не уверен:/

Я создал Plunker http://plnkr.co/edit/qPpW3x0SAHxTiX7SzPEM для демонстрации.

Полный репро

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

 
app.directive('gap', function() { 
 
    return { 
 
     transclude: true,  
 
     template: '<select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required></select>', 
 
     link: function ($scope, $element, $attr) { 
 
      // some code 
 
     } 
 
    } 
 
}); 
 

 
app.directive('ngHtmlCompile', function($compile) 
 
{ 
 
    return { 
 
     restrict: 'A',  
 
     link: function(scope, element, attrs) 
 
     { 
 
      scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) 
 
      { 
 
       element.html(newValue); 
 

 
       $compile(element.contents())(scope); 
 
      }); 
 
     } 
 
    } 
 
}); 
 

 
app.controller('TestController', function($scope) 
 
{ 
 
    $scope.html = "A cat goes <gap></gap> a dog goes <gap/>"; 
 
    $scope.data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}] 
 
}); 
 

 
    //var UsersService = $resource('/auth/users', {});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
<div ng-app="myApp" ng-controller="TestController"> 
 
    <div ng-html-compile="html"></div> 
 
    <br> 
 
    <br> 
 
    Current output<br> 
 
    {{data}}<br> 
 
    Desired output<br> 
 
    [{"option":"meow","answer":"meow"},{"option":"woof","answer":"woof"}]<br> 
 
</div> 
 

 
</html>

Любая помощь будет оценена.

Cheers, Matt

источник

2015-01-29 Matt Searles

Ваш вопрос не ясен. подробно изложите его. – Ved

Вы должны включить минимальный и соответствующий код, который «не работает» в вопросе. Вопрос должен быть самоподдерживающимся, даже если ссылки не работают –

Извинения, разработали и добавили код –

Так что ... нужно прототипически наследовать объем (объем: правда)

Tag каждый элемент с индексом (так как мы знаем, какой элемент мы говорим о) , то в унаследованной области копировать экземпляр опции, поэтому мы можем использовать его с ng-моделью.

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

 
var gapIndex = 0; 
 

 
app.directive('gap', function() { 
 
    return { 
 
     transclude: true, 
 
     scope : true, 
 
     template: '<select type="name" ng-model="item.answer" ng-options="item.option as item.option for item in data" required></select>', 
 
     link: function ($scope, $element, $attr) { 
 
      $element.tag = gapIndex++; 
 
      $scope.item = $scope.data[$element.tag]; 
 
     } 
 
    } 
 
}); 
 

 

 
app.directive('ngHtmlCompile', function($compile) 
 
{ 
 
    return { 
 
     restrict: 'A',  
 
     link: function(scope, element, attrs) 
 
     { 
 
      scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) 
 
      { 
 
       element.html(newValue); 
 

 
       $compile(element.contents())(scope); 
 
      }); 
 
     } 
 
    } 
 
}); 
 

 
app.controller('TestController', function($scope) 
 
{ 
 
    $scope.html = "A cat goes <gap></gap> a dog goes <gap/>"; 
 
    $scope.data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}] 
 
});

источник

2015-01-30 02:59:16

Как установить свойство выбранного элемента ng-options с ng-model

ответ

Смежные вопросы