【问题标题】:AngularJS, need help creating a simple functionAngularJS,需要帮助创建一个简单的函数
【发布时间】:2017-12-06 15:36:57
【问题描述】:

我想了解如何执行以下操作,他们让我尝试在控制器中创建一个函数,而不是在视图中编写代码。

代码是:

 <div class="row">
                <div class="col-xs-12 max300" 
                     uib-dropdown is-open="vm.descriptionDropdownOpen">
                    <textarea name="description" class="form-control" 
                              ng-model="vm.presence.description" 
                              ng-click="vm.toggleDescriptionDropdown()"
                              autofocus>
                    </textarea>
                    <ul id="descriptionDropdown" uib-dropdown-menu>
                        <li ng-repeat="descr in vm.loadedDescriptions" 
                            ng-click="vm.presence.description = descr.text;
                                      vm.descriptionDropdownOpen = false;">
                            {{descr.text}}
                        </li>
                    </ul>
                </div>
            </div>

所以基本上这会创建一个文本框,当你点击它时,会出现一个下拉菜单,如果你点击下拉菜单的一个字符串,该字符串将被放入文本框中。

我需要做的是创建一个将放在控制器中的函数,这样我们就可以在视图中调用该函数并保持代码更好。

这个函数只需要做我上面贴的代码的最后一部分,从下拉菜单中把我点击的字符串放到文本框中!

这真的很简单,但随着我的学习,我不太确定应该如何编写它

setDescription(text: string) {
        // code should go here.
}

抱歉这个愚蠢的问题,只是想确保正确理解我在做什么!谢谢你

【问题讨论】:

  • 您的视图代码还没有做同样的事情吗? ng-click="vm.presence.description = descr.text;
  • 是的!但是在我学习的过程中,他们问我如何在控制器中使用一个函数来实现这一点,以保持视图中的代码干净!!

标签: angularjs function


【解决方案1】:

html

 ng-click="vm.submitString(descr.text)"

控制器

vm.submitString = function(text){
    return vm.presence.description = text;
}

【讨论】:

  • 非常感谢您的回答,我正试图弄清楚如何将您的代码放入他们给我的输入中,他们说用控制器中的一个函数来实现它,给我函数的开头是:setDescription(text: string) { // code should go here. } 所以如果我做对了,用你的代码,它应该是这样的: html: ng-click="setDescription(descr.text)" 控制器:setDescription(text: string) { return vm.presence.description = text; } 这是正确的吗?再次感谢您!
  • 我认为 setDescription(text: string) {} 是最新的角度版本,所以它也可以工作
【解决方案2】:

这样解决:

setDescription(text: string) { 
       return this.presence.description = text; 
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多