0

我对 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>

样式无关紧要。所以，我把它排除在外。

JavaScript

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 = "";
    };
};

所以，我想做的就是简单地给ng-repeat（在第 22 行）一个在我的 JS 中声明的函数，这样我就不必在代码中放入任何业务逻辑。例如，我想要这样的东西：

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

我怎样才能做到这一点？

4

3 回答 3

1

将页面逻辑像ng-repeat. 这不是业务逻辑，而是渲染页面的逻辑。而且它比使用函数实现它更优雅。

ng-repeat只需要一个表达式，但你应该能够像这样使用一个函数作为表达式的一部分，

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

因此，如果您需要对数据源进行预处理，您可以稍微简化一下。但我认为你不能ng-repeat像你所说的那样使用纯函数。希望能帮助到你。

于 2013-08-04T19:50:35.117 回答
0

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

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

于 2013-08-05T08:06:41.483 回答
0

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

这是一个演示，这里是它的来源。

于 2013-08-04T20:00:45.870 回答