Question

根据论文＆＃34;如何使用Angular.JS ng-options＆amp; amp;来设置选择元素的初始选择值。追踪＆＃34;通过我@Meligy作为指导，通过实施选择列表（ng-options）来学习和解决我的问题，我仍然遇到一些奇怪的collaterale行为。

虽然基本行为最终会做它应该做的事情，但请参阅Test Plunk，我仍然会在该列表中的所选项目上遇到奇怪的行为。不过我的测试不是在我的开发网站上实现的。

app.controller("TaskEditCtrl", function($scope) {

  $scope.loadTaskEdit = loadTaskEdit;

  function loadTaskEdit() {
    taskLoadCompleted();
    tasktypesLoadCompleted();
  }

  function taskLoadCompleted() {
    $scope.tasks = [{
        Id: 1,
        Name: "Name",
        Description: "Description",
        TaskTypesId: 4
      }
    ];
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;    
  }

  function tasktypesLoadCompleted() {
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }];

    $scope.available_tasktypes_models = tasktypes    
  }

  $scope.submit = function(){
    alert('Edited TaskViewModel (New Selected TaskTypeId) > Ready for Update: ' + $scope.tasks[0].TaskTypesId);
  }

  loadTaskEdit();    
});

HTML

<form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">        
        <div ng-repeat="task in tasks">             
          <div>
            <select ng-init="task.TaskTypes = {Id: task.TaskTypesId}" 
            ng-model="task.TaskTypes" 
            ng-change="task.TaskTypesId = task.TaskTypes.Id" 
            ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id">
            </select>
          </div>
        </div>

        <div class="">
          <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" />
        </div>

      </form>

如上所述，请参阅我的测试插件，它显示了它应该做什么。此外，使用5个自我解释的图像，我希望能让我的问题更加清晰。

我有点迷失了，弄清楚什么是如此麻烦。我的水＆＃39;在CSS中告诉我一些错误或遗漏。有没有人有他们的面孔可比？什么可能导致我这个麻烦？有没有人有线索？

提前致谢

[ Object Task does have a property TaskType 1 [ Edit mode Object Task ] 2 [ However no selected item visible, the correct list item seems to have focus ] 3 [ Select item value is passed on (which in itself is correct) ] 4

显然我是css的新秀。欢迎任何建议！

CSS

    #region "style sheets"
    bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/css/site.css",
         "~/content/css/bootstrap.css",
         "~/content/css/bootstrap-theme.css",
         "~/Content/css/font-awesome.css",
         "~/Content/css/morris.css",
         "~/Content/css/toastr.css",
         "~/Content/css/jquery.fancybox.css",
         "~/Content/css/loading-bar.css"));
    #endregion "style sheets"

Answer 1

下拉列表的键是将模型设置为所选对象。我更新了你的代码，以表达我认为你要求它工作的方式。

主要区别是：

将下拉列表的ng-model设置为所选对象，而不是所选项目的ID。这将使您可以访问完整的选定对象及其所有属性。
删除ng-change绑定 - 这对于双向数据绑定不是必需的，并且模型上的值（任何为ng-model输入的内容）将自动更新。
在您的HTML中，您使用的是从未在Controller $范围中声明的属性。我更新了这些以反映范围内的可用变量。

有关下拉菜单的更多信息，请参阅角度文档。这对于解决这些类型的问题非常有用 - https://docs.angularjs.org/api/ng/directive/select

// Code goes here

var app = angular.module("myApp", []);

app.controller("TaskEditCtrl", function($scope) {

  $scope.tasks = {};
  $scope.current_task_tasktypesid = null;
  $scope.selected_task_tasktype = null;

  $scope.loadTaskEdit = loadTaskEdit;

  function loadTaskEdit() {
    taskLoadCompleted();
    tasktypesLoadCompleted();

    
    //EDIT: DEFAULT DROPDOWN SELECTED VALUE
    $scope.selected_task_tasktype = $scope.available_tasktypes_models[2];
  }

  function taskLoadCompleted() {
    $scope.tasks = [{
        Id: 1,
        Name: "Name",
        Description: "Description",
        TaskTypesId: 4
      }
    ];
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;

  }

  function tasktypesLoadCompleted() {
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }];
    
    $scope.available_tasktypes_models = tasktypes

  }
  
  $scope.submit = function(){
    alert('submitted model: ' + $scope.selected_task_tasktype.Id);
  }

  loadTaskEdit();

});

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="TaskEditCtrl as edit">

  <form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">

    <div ng-repeat="task in available_tasktypes_models">
      
      <div>Task (Id): {{task.Id}}</div>
      <div>Name: {{task.Name}}</div>
      <div>Descripton: {{task.Description}}</div>
     </div>     
      <p>Current Task.TaskTypesId: {{selected_task_tasktype.Id}}</p>

      <div>
        <select
        ng-model="selected_task_tasktype" 
        ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id">
        </select>
      </div>
      <p>{{task.TaskTypes}}</p>
      <p>{{selected_task_tasktypesid = task.TaskTypes}}</p>
      
    

    <div class="">
      <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" />
    </div>

  </form>

</body>

</html>

Answer 2

首先，我需要说明@Meligy的实现，并且'dball'的建议输入是正确的。所以，请选择您喜欢的流程。

在样式表上注意。

最后，我发现带有选择器#editTaskWrapper值'white'的样式属性'color'作为父级的标识符

<div id="editTaskWrapper">

扮演坏人。不管怎样，如果我在

中评论'color：white'

#editTaskWrapper {
    background-color: #337AB7;
    /*color: white;*/
    padding: 20px;
}

选择列表中的所选项目变为可见。所有其他控件和值不受影响，仅受选中的列表项。

奇怪的行为角度驱动的选择列表

2 个答案: