angularjs 1.6.9 $watch

在 AngularJS 1.6.9 中，$watch 是一个作用域方法，用于监视模型的变化。它的语法如下：

$watch(watchExpression, listener, [objectEquality]);

其中，watchExpression 是一个字符串或者一个函数，它指定了需要监视的模型；listener 是一个回调函数，在监视的模型发生变化时被调用；objectEquality 是一个布尔值，用于指定是否使用对象比较来检测模型变化。

例如，以下代码会在作用域中添加一个名为 name 的模型，并通过 $watch 方法监视该模型的变化：

$scope.name = 'John';

$scope.$watch('name', function(newValue, oldValue) {
  console.log('Name changed from ' + oldValue + ' to ' + newValue);
});

当 $scope.name 的值发生变化时，$watch 方法会自动调用监听器函数，并传递新值和旧值作为参数。在上面的例子中，如果将 $scope.name 的值改为 "Mary"，则会在控制台输出 "Name changed from John to Mary"。

相关问题

angularjs 1.6.9 ng-class

`ng-class` 是 AngularJS 中一个非常有用的指令，它允许我们根据条件动态地切换 HTML 元素的类。在 AngularJS 1.6.9 中，`ng-class` 的用法如下：

<div ng-class="{ 'class1': expression1, 'class2': expression2 }"></div>

其中，`class1` 和 `class2` 是要切换的类名，`expression1` 和 `expression2` 是用于决定是否添加相应类的表达式。如果表达式的值为真，则添加相应的类；如果表达式的值为假，则移除相应的类。

除了使用对象字面量的方式外，还可以使用数组的方式来切换类。例如：

<div ng-class="[class1, class2]"></div>

其中，`class1` 和 `class2` 都是作为作为作用域中的变量或者常量来定义的类名。如果这些变量的值为真，则添加相应的类；如果这些变量的值为假，则移除相应的类。

angularjs 1.6.9 select ng-bind

在 AngularJS 1.6.9 中，您可以使用 `ng-options` 指令来设置下拉选项列表，然后使用 `ng-model` 指令将选定的值绑定到模型中。 如果您想在选项中显示另一个值，可以使用 `ng-bind` 指令。

以下是一个简单的示例：

HTML 代码：

<select ng-model="selectedItem" ng-options="item.id as item.name for item in items">
    <option value="">Select an item</option>
</select>
<p>You selected item {{selectedItem}} - {{selectedItemName}}</p>

AngularJS 控制器代码：

$scope.items = [
    {id: 1, name: 'Item 1'},
    {id: 2, name: 'Item 2'},
    {id: 3, name: 'Item 3'}
];
$scope.selectedItem = '';
$scope.selectedItemName = '';

$scope.$watch('selectedItem', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        var selectedItem = $filter('filter')($scope.items, {id: $scope.selectedItem});
        $scope.selectedItemName = selectedItem[0].name;
    }
});

在这个例子中，`ng-options` 指令将选项列表设置为 `items` 数组中的每个项目的 `id` 属性和 `name` 属性的组合。 `ng-model` 指令将所选项目的 `id` 绑定到 `$scope.selectedItem` 变量中。 最后，`ng-bind` 指令将 `$scope.selectedItemName` 变量绑定到选中项目的 `name` 属性，以显示所选项的名称。