个人中心
gpt4 book ai didi

javascript - 奇怪的行为 Angular 驱动的选择列表

转载 作者：行者123 更新时间：2023-11-28 05:27:08 26 4
gpt4 key购买 nike

根据 @Meligy 的论文“如何使用 Angular.JS ng-options & track by 设置选择元素的初始选定值”我以此为指导来学习和解决实现选择列表(ng-options)的问题，但我仍然遇到一些奇怪的附带行为。

尽管基本行为最终完成了它应该做的事情，参见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 个 self 解释的图像，我希望让我的烦恼更清楚问题是什么。

我有点迷茫，搞不懂到底是什么东西这么麻烦。我的“水”告诉我 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 enter image description here 

    #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"

最佳答案

下拉菜单的关键是将模型设置为所选对象。我更新了您的代码以按照我认为您要求它工作的方式运行。

主要区别是:

  1. 将下拉列表的 ng-model 设置为所选对象，而不是所选元素的 ID。这将使您能够访问完整的选定对象及其所有属性。

  2. 删除 ng-change 绑定(bind) - 这对于 2 路数据绑定(bind)来说不是必需的，模型上的值(无论为 ng-model 输入什么)都会自动更新。

    <

  3. 在您的 HTML 中，您使用的属性从未在 Controller $scope 中声明过。我更新了那些以反射(reflect)范围内的可用变量。

有关下拉菜单的更多信息，请参阅 Angular 文档。它对于解决这些类型的问题非常有用 - 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>

关于javascript - 奇怪的行为 Angular 驱动的选择列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38722188/

26 4 0
文章推荐： javascript - 使用热键根据快捷键触发按钮点击事件
文章推荐： C++ 如何将 wchar_t* 转换为 TCHAR [](不是 TCHAR*)
文章推荐： javascript - 为什么javascript不返回四舍五入的数字
文章推荐： c++ - 不使用线程的并行 while 循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com