Question

我对AngularJS相对较新，并且在这个过程中也刷新了我的JS，所以这可能是一个非常基本的问题，但这里什么都没有。我想将我的代码分开，即演示中的逻辑，因为我想遵循MVC指南。

所以，我遇到的问题是我最终不得不在我的HTML中写了很多代码，我真的不喜欢这个，因为以后很难调试，而且这段代码包含在{{{ 1}}。

所以，不用多说了，这里是代码，供参考，我请check this，因为它有一个行号。：

HTML

ng-repeat

造型无关紧要。所以，我把它留下来。

的JavaScript

<!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>

所以，我想做的只是给var List = function ($scope) { // Making the list called names $scope.people = [ {name: "Harold", age:"20"}, {name: "Jessie", age:"34"}, {name: "Samantha", age:"18"}, {name: "March", age:"40"}, {name: "Scott", age:"44"}, {name: "David", age:"28"}, {name: "Dan", age:"28"} ]; $scope.add = function () { $scope.people.push({ name: $scope.new_name, age: $scope.new_age }); $scope.new_name = ""; $scope.new_age = ""; }; };（第22行）一个在我的JS中声明的函数，这样我就不必在代码中放入任何业务逻辑了。例如，我想要这样的事情：

ng-repeat

我怎样才能做到这一点？

Answer 1

将页面逻辑放在模板上是有意义的，就像ng-repeat中的理解表达式一样。这不是业务逻辑，而是呈现页面的逻辑。它比使用函数实现它更优雅。

ng-repeat只接受一个表达式，但你应该可以使用一个函数作为表达式的一部分，如下所示，

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

如果您需要预处理数据源，可以简化一下。但我认为你不能像你所说的那样在ng-repeat中使用纯函数。希望它有所帮助。

Answer 2

我不太明白你为什么再次需要function_that_returns_person_objects。 Angular的绑定将确保您的视图保持最新。

以下是demonstration，此处为source。

Answer 3

如果您有一个复杂的过滤功能，那么只需将其“放在一边”，如下所示：http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

但是当你消费它时，它就在视图中，因为你想在它返回的值之后重复一个视图部分。

减少ng-repeat中的代码

3 个答案: