Question

我正在尝试在angularJs中选择下拉值并将其保存在服务中，以便我可以在另一个视图上使用它来向用户显示他所选的值和完整下拉列表。但是当我尝试在控制器内记录所选值时我正在获得undefined的价值。请帮我解决。

<td>
  <select name="systems" class="pulldown1" id="systems" ng-model="system.selectedOption" ng-controller="EurexController" required ng-options="option.name for option in system.availableOptions track by option.id" ng-init="system.selectedOption=system.availableOptions[0]" ng-change="changed()"> </select>
</td>

控制器代码：

$scope.system = {
  availableOptions: [{
    id: 'Domestic 1',
    name: 'Domestic 1'
  }, {
    id: 'Domestic 2',
    name: 'Domestic 2'
  }, {
    id: 'Global',
    name: 'Global'
  }, {
    id: 'Far East',
    name: 'Far East'
  }],
  // selectedOption: {id: 'Domestic 1', name: 'Domestic 1'} //This sets the default value of the select in the ui
};

我也尝试过使用AngularJS网站上提到的selectoption。但仍然无法做到。

console.log($scope.system.selectedOption);
console.log(systems);

Answer 1

最好将ng-controller属性放在容器元素上，而不是直接放在<select>元素之类的内容上。这允许您在整个视图中使用控制器，而不是将其限制为<select>元素。您的console.log(systems);未定义，因为控制器上下文中不存在systems。除非您确实需要ng-init，否则请避免使用angular.module('app', []) .controller('ctrl', function($scope, myService) { $scope.system = { availableOptions: [{ id: 'Domestic 1', name: 'Domestic 1' }, { id: 'Domestic 2', name: 'Domestic 2' }, { id: 'Global', name: 'Global' }, { id: 'Far East', name: 'Far East' }] }; $scope.system.selectedOption = {}; // uncomment the following line if you want to set a default selection //$scope.system.selectedOption = $scope.system.availableOptions[0]; $scope.optionChanged = function() { myService.optionValue = $scope.system.selectedOption; console.log($scope.system.selectedOption); } }) .controller('ctrl2', function($scope, myService) { $scope.myService = myService; }) .service('myService', function() { var _optionValue = {}; return { get optionValue() { return _optionValue; }, set optionValue(value) { _optionValue = value || {}; } } });。以下是使用您提供的代码的修改版本的工作示例：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <h2>ctrl</h2>
    <div>
      <select ng-model="system.selectedOption" ng-options="option as option.name for option in system.availableOptions" ng-change="optionChanged()">
        <option value="">Please select</option>
      </select>
    </div>
    <div>
      Selected option: {{ system.selectedOption | json }}
    </div>
  </div>
  <div ng-controller='ctrl2'>
    <h2>ctrl2</h2>
    <div>
      {{ myService.optionValue }}
    </div>
  </div>
</div>

＆＃13;

var file1 = @"C:\Users\User\Desktop\file1.txt";
var file2 = @"C:\Users\User\Desktop\file2.txt";

var file1Lines = File.ReadAllLines(file1);
var file2Lines = File.ReadAllLines(file2).ToList();

// before the copy
Console.WriteLine("**Before the copy**");
Console.WriteLine(File.ReadAllText(file2));

foreach (var l in file1Lines)
{
    file2Lines.Add(l);
}
File.WriteAllLines(file2, file2Lines);

// after the copy
Console.WriteLine("**After the copy**");
Console.WriteLine(File.ReadAllText(file2));

＆＃13;

Angular Js下拉列表在控制器内未定义选定值

1 个答案: