Javascript 减少ng-repeat中的代码_Javascript_Model View Controller_Angularjs

Javascript 减少ng-repeat中的代码

javascript model-view-controller angularjs

Javascript 减少ng-repeat中的代码,javascript,model-view-controller,angularjs,Javascript,Model View Controller,Angularjs,我对AngularJS比较陌生，在这个过程中我也复习了我的JS，所以这可能是一个非常基本的问题，但这里什么都没有。我想把我的代码分离出来，也就是说，逻辑从演示文稿中分离出来，因为我想遵循MVC准则所以，我的问题是，我最终不得不在HTML中编写大量代码，我真的不喜欢这样，因为以后调试变得很困难，而这些代码包含在ng repeat中因此，不用多说，这里是代码，仅供参考，因为它的旁边有行号： HTML <!doctype html> <html lang="en-US" ng-a

我对AngularJS比较陌生，在这个过程中我也复习了我的JS，所以这可能是一个非常基本的问题，但这里什么都没有。我想把我的代码分离出来，也就是说，逻辑从演示文稿中分离出来，因为我想遵循MVC准则

所以，我的问题是，我最终不得不在HTML中编写大量代码，我真的不喜欢这样，因为以后调试变得很困难，而这些代码包含在

ng repeat

中

因此，不用多说，这里是代码，仅供参考，因为它的旁边有行号：

HTML

<!doctype html>
<html lang="en-US" ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-click</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
    <body>
    <!--Search div-->
    <div class="search">
        <label for="findName" >
            Find your name:
            <input type="search" name="userSearch" id="angularUserSearch" ng-model="search"/>
        </label>
    </div>

    <!--List of results-->
    <div ng-controller="List">
        <ul>
            <!--Can also work with objects-->
            <li ng-repeat="person in people | filter:search">
                {{ person.name }} -> {{ person.age }}
            </li>
        </ul>
        <div>
            <label for="">
                Name:
                <input type="text" name="new_name" id="new_name" ng-model="new_name"/>
            </label>
            <br>
            <label for="">
                Age:
                <input type="text" name="new_age" id="new_age" ng-model="new_age"/>
            </label>
            <br>
            <button ng-click="add()">Add</button>
        </div>
    </div>
    <!--Scripts-->
    <script type="text/javascript" src="angular_1.0.7.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    </body>
</html>

因此，我想做的是，简单地给

ng repeat

（第22行）一个函数，它在我的JS中声明，这样我就不必在代码中加入任何业务逻辑。例如，我想要这样的东西：

 <li ng-repeat="function_that_returns_person_objects()">

如何实现这一点？

将页面逻辑放在模板上是有意义的，就像

ng repeat

中的理解表达式一样。这不是业务逻辑，而是呈现页面的逻辑。而且它比使用函数实现它更优雅

ng repeat

只接受表达式，但您应该能够使用函数作为表达式的一部分，如下所示

<li ng-repeat="data in myFunction()">

因此，如果需要对数据源进行预处理，可以稍微简化。但是我认为你不能像你说的那样在

ng repeat

中使用纯函数。希望有帮助。

我不太明白为什么您需要返回person对象的

函数。Angular的绑定将确保您的视图保持最新
这是一个，这是它的答案。
如果你有一个复杂的过滤函数，就这样把它写在“旁边”：
但是，当您使用它时，，它是从视图中正确的，因为您希望按照它返回的值重复视图部分。非常感谢您回答我的问题，过去几天您帮了我很大的忙，但我想要的是纯函数，因为我想抽象出逻辑，这只是为了更容易调试，仅此而已，如果我想重新使用代码，那么这也更有意义。此外，当过滤器变得比这更复杂时，我想知道如何将其抽象为一个函数。@GamesBrainiac根据文档，Angularjs似乎不支持它。我明白了。。。那么，我猜就是这样。谢谢你我很感激。我的目标是简单地抽象出逻辑。这就是我打算做的。我已经从ng click中删除了额外的逻辑。
<li ng-repeat="data in myFunction()">