单击后在 AngularJS 中切换视图

Posted 2023-02-26

【中文标题】单击后在 AngularJS 中切换视图

【英文标题】：Switch view in view in AngularJS upon click

【发布时间】：2015-11-29 14:46:02

【问题描述】：

亲爱的 ***，你好。

我目前正在开发一个 AnguarJS 项目，并且已经取得了一些进展。

但是，现在我想在单击时将视图框更改为另一个视图，但我很难弄清楚如何去做。

所以控制器有一个工厂，它又拥有一些数据（姓名和年龄）。 名称被加载到带有 ng-options 的选择中，并且根据名称，视图框将更改以显示该名称和年龄。

现在我想制作一个按钮，该按钮将调用一个视图，从而可以更改所选项目（我知道我需要一个后端来保持这些实际更改，但现在，我只想更改它）。

我应该怎么做。 （这段代码没有重构，但请耐心等待：））

views/home.html：

<div class="container">
        <div clas="row">
            <div style="width: 200px; margin-top: 100px">
            <select  ng-model="selectedItem" ng-options="patients.name for patients in patients" class="pull-left form-control" name="Vælg"></select>
            </div>
            <div class="viewbox pull-right">
                <h3>Patient: selectedItem.name</h3>
                <p>Age: selectedItem.age </p>
            </div>

        </div>
        <div class="row" class="pull-left">
            <div style="width: 200px; margin-top: 100px">
            <form  role="form" class="form-group" ng-submit="addPost()">
                <input  class="form-control" type="text" ng-model="title" />
                <input  class="form-control" type="text" ng-model="age" />
                <button type="submit">Add</button>
            </form>
            </form>
        </div>
     </div>
     </div>

app.js：

var app = angular.module('KOL', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
        $stateProvider
            .state('home', 
                url: '/home',
                templateUrl: './views/home.html',
                controller: 'kolCtrl'
            );

            $urlRouterProvider.otherwise('home');
    ])
    .factory('patients', [function()
        var object = 
        patients: [ 

                    name: 'Erik', age: 42,
                    name: 'Lars', age: 24,
                    name: 'Karl', age: 12,
                    name: 'John', age: 16


                    ]
       ;
        return object;
    ])
    .controller('kolCtrl', ['$scope', 'patients', 
        function($scope, patients)

              $scope.patients = patients.patients;
              $scope.selectedItem = $scope.patients[0];

              $scope.addPost = function() 
                if(!$scope.title || $scope.title === '')  return; 
                if(!$scope.age || $scope.age === '')  return; 
                $scope.patients.push(name: $scope.title, age: $scope.age);
                $scope.title = '';
                $scope.age = '';
              ;


])


;

【参考方案1】：

如果您想将selectedItem 添加到新添加的元素，只需在addPost 函数中执行此操作：

var newPatient = name: $scope.title, age: $scope.age; 
$scope.patients.push(newPatient);
$scope.selectedItem = newPatient;

然后新元素会显示在viewbox元素内。

更新：

最初的问题是，ng-options 需要进行调整才能使用 patients 数组的索引。 最简单的解决方案是以不同的方式执行ng-select：

<select ng-model="selectedItem" ng-options="patients.indexOf(patient) as patient.name for patient in patients"></select>

【讨论】：

感谢您的回答！但我的问题不在于如何添加新患者。假设您从我的选择框中选择了一位患者，它会显示在我的视图框中。 （哪个有效）。我正在尝试实现的，如果可能的话，选择的患者在视图框中，将有一个按钮。当您单击此按钮（在视图中）时，视图将变为另一个视图，您可以在其中编辑所述患者。希望它更清楚:)

当然有。最简单的方法是对按钮进行操作，该按钮使用来自所选患者的数据填充来自输入的 ng-model（年龄、标题）。您唯一需要注意的是，您要区分编辑和添加提交。在编辑时，您只需更新数组中的患者。我希望这能说清楚。如果没有，我可以详细说明一个例子。

如果你有时间做一个例子，我将不胜感激！ :)

您可能需要这个，因为您想替换数组中更新的患者，对吧？如果是的话，我可以给你一个例子，如何在不需要 $index 的情况下做到这一点。

嗯，老实说，这不是更新或创造新患者。这是为了显示视图，其中包含我在列表中选择的患者的详细信息。这有意义还是我应该说得更清楚？ :)