设置 $scope 变量 AngularJS

Question

所以我在事件发生后向 $scope 添加变量时遇到问题。 这是选择框的 HTML。基本上当它改变时，我需要改变范围。

Index.html

<select ng-controller="ClientCtrl" ng-model="name" 
ng-options="v.name for (k, v) in client" ng-change="selectChange(name)">
</select>

<h2>{{cName}}</h2>
<p>Age: {{cAge}}</p>
<p>Notes: {{cNotes}}</p>

Controller.js

$scope.selectChange = function(name){
    $scope.cName = name.name;
    $scope.cAge = name.age;
    $scope.cNotes = name.notes;
  };

我已经尝试了一些方法来设置这些变量。显然是上面这个，然后是这个：

$scope.selectChange = function(name){
        $scope.cName = name.name;
        $scope.cAge = name.age;
        $scope.cNotes = name.notes;
        $scope.$apply();
  };

我仍然不太了解 apply，但我想我会尝试一下。任何帮助都会很棒，只需要一个指针来解释为什么这不起作用。

我可以将变量发布到 console.log(cName);但是当我有 {{cName}}

时它不会显示

Answer 1

您实际上不必在 ng-change 事件中传递名称，因为您实际上已经在作用域中拥有该名称。 changeEvent 可以直接使用 $scope.name 而不是作为参数传递。

ng-change="selectChange()"

js

$scope.selectChange = function(){
    $scope.cName = $scope.name.name;
    and so on.  
};

id 建议你给它一个比名字更好的名字，我猜是在谈论一个人，所以如果你把它叫做 Person.Name 等等会更容易阅读；）

你还需要将你的 print 包装在你现在拥有 name 的同一个控制器中，以使其工作，因为范围是为控制器创建的。

Answer 2

如果没有更多信息，它很难完全调试，但据我所知，我建议将整个 html 片段包装在控制器 ClientCtrl 中，否则 h2 和 p 标签将无法访问它创建的范围。

<div ng-controller="ClientCtrl">
  <select ng-model="name" ng-options="v.name for (k, v) in client" ng-change="selectChange(name)">
  </select>

  <h2>{{cName}}</h2>
  <p>Age: {{cAge}}</p>
  <p>Notes: {{cNotes}}</p>
</div>

希望这有助于发布更多信息或使用 plunker...