单击后在AngularJS中切换视图

Question

Hello dear Stackoverflow.

I am currently developing a AnguarJS project, and I have made some headway.

However, now I want to change a viewbox another view, on click, and I have difficulty figuring out how to go about this.

So the controller has a factory which in turn have some data (names and age). The names get loaded into a select with ng-options, and depending on the name, a viewbox will change to display that name and age.

Now I want make a button, which will call a view, which makes it possible to change selected item (I know I need a backend for these actual changes to stick, but for now, I just want it to change).

How should I go about this. (This code is not refactored, but bear with me :) )

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

If you want to add set the selectedItem to the newly added element just do this in the addPost function:

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

Then the new element will be displayed inside the viewbox element.

Update:

The original problem was, that ng-options needed to be adapted to be able to work with the index of the patients array. The easiest solution was to do the ng-select differently:

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