草庐IT

javascript - 输入数据更改时，AngularJs 不会更新模型

coder 2024-07-20 原文

我有一个使用指令的 Angular 应用程序。 在指令中，我有定义弹出模式的模板。

基本上，这是一个显示图书作者列表的非常简单的应用程序，在列表中有一个编辑按钮可以打开模态框。 如果我打开用于编辑图书作者的模式，然后关闭它，而不编辑作者 - 没有问题。

但是如果我打开模式，在作者输入中输入一些东西，然后关闭它，模型会一直停留在当前输入值，所以如果我打开另一个作者进行编辑，模型将不会已更新。

我的问题是:为什么会发生这种情况，如何解决？

HTML

<div ng-controller="MyCtrl">
    <table class="table table-hover">
            <tr>              
                <td><b>Publisher</b></td>                
                <td><b>Edit Publisher</b></td>
            </tr>
            <tr ng-repeat="book in books">
                <td>
                    {{book.Author}}
                </td>
                 <td>
                    <span ng-click="toggleModal(book)" class="btn btn-primary">Edit</span>
                </td>
            </tr>
        </table>

    <modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'>
        <div ng-show="divBook">
              <input type="text" name="bookAuthor" ng-model="bookAuthor" />
        </div>
    </modal-dialog>
</div>

Angular 

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

myApp.controller("MyCtrl", function($scope){
    $scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}];

    $scope.modalShown = false;
     $scope.toggleModal = function (book) {
          $scope.bookAuthor = book.Author;
          $scope.modalShown = !$scope.modalShown;
          $scope.divBook = true;
    };    
});

myApp.directive('modalDialog', function () {
    return {
        restrict: 'E',
        template: "<div  class='ng-modal' ng-show='show'>"
                    +"<div class='ng-modal-overlay' ng-click='hideModal()'>"
                     +"</div>"
                      +"<div class='ng-modal-dialog' ng-style='dialogStyle'>"
                      +"<div class='ng-modal-close' ng-click='hideModal()'>X</div>"
                      +"<div class='ng-modal-dialog-content' ng-transclude>"
                     +"</div>"
                    +"</div>"
                +"div>",
        replace: true,
        scope: {
            show: '=info'
        },
        transclude: true,
        link: function (scope, element, attrs) {

            //scope.apply();
            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            scope.hideModal = function () {
                scope.show = false;
            };
        }
    };
});

因此，测试用例将是:

点击编辑 -> 更改值 -> 关闭模式

点击编辑其他作者。

JSFiddle: http://jsfiddle.net/HB7LU/17694/

最佳答案

模型值正在改变，但是您正在创建一个新变量而不是修改数组的原始元素。

您可以通过将数组对象的指针放在范围变量中来更改它

$scope.toggleModal = function (book) {
      $scope.book = book;
      $scope.modalShown = !$scope.modalShown;
      $scope.divBook = true;
};

然后将 ng-model 指向对象的 .Author 属性。

<input type="text" name="bookAuthor" ng-model="book.Author" />

参见修改后的 JSFiddle:http://jsfiddle.net/9a2jcc9u/1/

关于javascript - 输入数据更改时，AngularJs 不会更新模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32633099/

javascriptAngularJs34scopegtangularjs-directivemodal-dialog

有关javascript - 输入数据更改时，AngularJs 不会更新模型的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  6. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  7. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  8. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  9. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  10. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

随机推荐