Question

我写了一个学习AngularJS的应用程序：

family_tree.html

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>


<p>First step in Angular.js !</p>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <ul>
      <li ng-click="update_name(person.name)" id="{{person.id}}" ng-repeat="person in persons">
        Name = {{ person.name }} - Father = {{ person.father}} -
        Mother = {{ person.mother}}
    </ul>
  </div>

  <div ng-controller="personCtrl">
    Name: <input id="nameChanger" type="text" ng-model="name_to_change">
    <input type="button" ng-click="change_name()" value="Update">
  </div>

  </div>
</div>


<script>

var app = angular.module('myApp', []);



</script>

<script src="./family_displayer.js"></script>
<script src="./name_updater.js"></script>

</body>
</html>

family_displayer.js

app.controller('myCtrl', ['$rootScope', '$http',function($rootScope, $http){    
    $rootScope.update_name = function(name) {
        $rootScope.name_to_change = name;
    }

    $http.get('./data.json').success(function(json) {
        var persons; 
        for(var i in json){
            persons = json[i].person;
        }
        var tmp = new Array();
        for(var i = 0; i < persons.length; i++) {       
            var obj = {name : persons[i].name,
                       father : persons[i].father,
                       mother : persons[i].mother};
            tmp[persons[i].id] = obj;
        }
        var families = new Array();
        for(var i = 1; i < tmp.length; i++) {
            var name = tmp[i].name;
            var father = "X", mother = "X";
            if(tmp[i].father != undefined) {
                father = persons[tmp[i].father-1].name;         
            }
            if(tmp[i].mother != undefined) {
                mother = persons[tmp[i].mother-1].name;         
            }
            var obj = {
                id : i,
                name : tmp[i].name,
                father : father,
                mother : mother}
            families.push(obj);
            $rootScope.persons = families;

        }

    });
}]);

name_updater.js

app.controller('personCtrl', ['$rootScope', function($rootScope) {
    $rootScope.change_name = function() {
        var old_name = $rootScope.name_to_change;
        var new_name = document.getElementById("nameChanger").value;
        console.log("Change " + old_name + "by " + new_name);
        for(var i = 0 ; i < $rootScope.persons.length; i++) {
            if($rootScope.persons[i].name == old_name) $rootScope.persons[i].name = new_name;
            else if ($rootScope.persons[i].father == old_name) $rootScope.persons[i].father = new_name;
            else if($rootScope.persons[i].mother == old_name) $rootScope.persons[i].mother = new_name;
        }
        document.getElementById("nameChanger").value = "";

    }
}]);

它在列表中显示有关某些系列的信息（由JSON文件提供），如果我们点击列表中的某些信息（所以在li元素上），我们可以更改其名称，此更改将在之前显示名单。我的主要问题是所有内容都在同一页面上（显示器和更新程序）。

我想在您点击一个人时刷新页面以便仅显示要更改的名称，一旦完成，请使用新名称返回显示列表。我已经将两个控制器中的显示和更新方式分开，但我不知道如何实现我描述的上一个方案，以便不在同一页面上显示所有内容。

小AngularJS应用程序的独立功能

0 个答案: