Question

您好亲爱的Stackoverflow。

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

但是，现在我想更改一个视图框，另一个视图，点击，我很难搞清楚如何解决这个问题。

因此控制器有一个工厂，而工厂又有一些数据（名称和年龄）。名称将加载到带有ng-options的选项中，根据名称，视图框将更改为显示该名称和年龄。

现在我想制作一个按钮，它会调用一个视图，这样可以更改所选项目（我知道我需要一个后端来保持这些实际更改，但是现在，我只是希望它能够改变）。

我应该怎么做呢。（这段代码没有重构，但请耐心:) :)

视图/ 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>

单击时在AngularJS中切换视图

1 个答案: