javascript Angular:为 ng-model 提供方法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17793615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:39:21  来源:igfitidea点击:

Angular: Providing methods to ng-model

javascriptangularjs

提问by adeelx

I've taken up Angular recently as a learning exercise.

我最近开始学习 Angular 作为学习练习。

I'd like to pass a method to ng-modelor an expression which might evaluate to one.

我想传递一个方法ng-model或一个可能计算为 1 的表达式。

In this fiddle http://jsfiddle.net/C4aGk/you'll see that I've hard coded the field as ng-model="record.inner[0].text"and it works, now the thing is, i'd like to replace the hard-coded zero with something that is returned at run-time, selected by a criterion say id = 1.

在这个小提琴http://jsfiddle.net/C4aGk/你会看到我已经硬编码了该字段ng-model="record.inner[0].text"并且它可以工作,现在的事情是,我想用一些东西替换硬编码的零在运行时返回,由标准 say 选择id = 1

My HTML code:

我的 HTML 代码:

<div ng-controller="MainController" ng-app>
    <div ng-repeat="record in records">
        <input ng-model="record.inner[0].text"> <span>{{record.outer}}</span>
        <div ng-repeat="nested in record.inner">{{nested.id}} - {{nested.text}}</div>
        <hr />
    </div>
</div>
<br/>

and the corresponding js:

和相应的js:

function MainController($scope) {
    $scope.records = [{
        outer: "Hello",
        inner: [{
            id: 1,
            text: "Angular"
        }, {
            id: 2,
            text: "jQuery"
        }]
    }, {
        outer: "World",
        inner: [{
            id: 1,
            text: "Node.js"
        }, {
            id: 2,
            text: "Underscore.js"
        }]
    }];

    $scope.getText = function (record) {
        var index = 0;
        for (nested in record.inner) {
            if (nested.id === 1) {
                return "record.inner[" + index + "].text";
            }
            index++;
        }
    };

I've tried placing ng-model="getText(record)"as per https://groups.google.com/forum/#!topic/angular/Pef6LY2rT7gwith no success, and another search turned up this https://github.com/angular/angular.js/pull/1328which is equally unhelpful to me.

我试过ng-model="getText(record)"按照https://groups.google.com/forum/#!topic/angular/Pef6LY2rT7g放置但没有成功,另一个搜索结果是这个https://github.com/angular/angular.js/ pull/1328这对我同样没有帮助。

Any help will be highly appreciated.

任何帮助将不胜感激。

回答by Jon7

Anything that you pass into ng-model is evaluated as an angular expression against the scope. That means that record.inner[0].textis evaluated as $scope.record.inner[0].textand then the result of that expression is used. When you use getText(record), angular evaluates $scope.getText(record)and ng-model gets access to the result of this evaluation. Keep in mind that ng-model does not evaluate the result of this function call.

您传递给 ng-model 的任何内容都被评估为针对范围的角度表达式。这意味着它record.inner[0].text被评估为$scope.record.inner[0].text然后使用该表达式的结果。当您使用 时getText(record),angular 会进行评估$scope.getText(record)并且 ng-model 可以访问此评估的结果。请记住,ng-model 不会评估此函数调用的结果。

Your problem is that you are returning the result as an angular expression string, but never evaluating it, so ng-model is given a string that it cannot use. There are lots of ways to redesign your code to deal with this, but the simple (and probably not best) way would be to use something like ng-init to get the result of the function call and then insert that result into the ng-model. See this fiddle for a quick example http://jsfiddle.net/z5z9s/

您的问题是您将结果作为角度表达式字符串返回,但从未对其进行评估,因此 ng-model 被赋予了一个无法使用的字符串。有很多方法可以重新设计你的代码来处理这个问题,但最简单的(可能不是最好的)方法是使用 ng-init 之类的东西来获取函数调用的结果,然后将该结果插入到 ng-模型。有关快速示例,请参阅此小提琴http://jsfiddle.net/z5z9s/