单击后在 AngularJS 中切换视图

Question

亲爱的 Stackoverflow，你好。

我目前正在开发一个 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 = '';
              };


}])


;

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